CSS3性能体验

浏览数：21 / 时间：2015年06月09日

如今许多新技术名词在不断的被提及中，已然向我们靠近。
某篮球运动员说了：“变向过人”不是超级明星的专利，也许我也可以试着去做，现在看起来效果还不错...
那么，现在我们来体验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属性加上前缀，针对使用的浏览器做兼容性处理，不然可能没有效果。

CSS3性能体验,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： http color it java html class 类 代码 问题 js oc http color it java html class 类 代码 问题 js oc

相关文章

随机文章

您可能还喜欢

您可能还喜欢