CSS3性能体验

来源:互联网 时间:1970-01-01

如今许多新技术名词在不断的被提及中,已然向我们靠近。
某篮球运动员说了:“变向过人”不是超级明星的专利,也许我也可以试着去做,现在看起来效果还不错...
那么,现在我们来体验CSS3:
CSS3中的动画功能有两种,transitions和animations,下面以tranisition 配合 div伪类 示范:

<!doctyle html>

  <head>

  <meta charset="utf-8">

  <title>CSS3性能体验</title>

  <style>

     div{width:50px;height:50px;border:1px solid red;overflow:hidden;line-height:50px;text-align:center;}

     div:hover{

          width:50px;

          height:200px;

          /* transition:需要改变的属性  多长时间完成动画  通过什么方法完成动画 */

          -webkit-transition:height 1s linear;

          -moz-transition:height 1s linear;

          -o-transition:height 1s linear;

     }

  </style>

</head>

<body>

    <div>

      <span>+</span><br />

      <span>橘子</span><br />

      <span>桔子</span><br />

      <span>橙子</span><br />

    </div>

</body>

</html>

- 以上代码可用:将注释下面的三行css代码去掉,即可比较差异 -

注意:CSS3存在一些浏览器间的兼容性问题,transition加上前缀是为了兼容不同内核的浏览器,如:-webkit-适用Safari和Chrome浏览器,-moz-适用Firefox浏览器,-o-适用Opera浏览器。

transition实现的动画只能指定开始值和终点值,然后实现两个值之间的平滑过渡,不能实现更复杂的效果,这时候就需要用到上面提及的animation,有兴趣的朋友可以查相关手册使用。

另,CSS3中还有一些其他有用的属性,这里列举几个:

transform:          通过改变角度值,实现变形、倾斜、旋转等效果,配合js中的setInterval可以轻松的转起来

border-radius:      这个也很强大,画圆角、画圆就必然会用到它

box-shadow:         给div等这些添加阴影效果

text-shadow:        以box对应,给文字这些添加阴影的

text-overflow:      在你限定的div盒子内写文字,如果超出了,自动会以三个点的省略号代替,那么就不用php去连接省略号了

重申:测试时注意CSS3属性加上前缀,针对使用的浏览器做兼容性处理,不然可能没有效果。


相关阅读:
Top