如今许多新技术名词在不断的被提及中，已然向我们靠近。
某篮球运动员说了：“变向过人”不是超级明星的专利，也许我也可以试着去做，现在看起来效果还不错...
那么，现在我们来体验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性能体验的更多相关文章

  1. 提升html5的性能体验系列之三流畅下拉刷新

    下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...

  2. 提升html5的性能体验系列之一避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  3. 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉

    下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...

  4. 提升HTML5的性能体验系列之二 列表流畅滑动

    App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...

  5. 提升HTML5的性能体验系列之一 避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  6. 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]

    webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...

  7. 提升html5的性能体验系列之四使用原生ui

    原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求. ...

  8. 提升html5的性能体验系列之二列表流畅滑动

    App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...

  9. 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

    webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...

随机推荐

  1. 集群Redis使用 Python pipline大批量插入数据

    class myRedis(object):     def __init__(self,redis_type=None,**args):         if redis_type == " ...

  2. jvm内存分区及各区线程问题

    一.java内存模型图 二.直观分类图 三.各区简单描述 1.堆(heap):主要存放对象的实例也包括数组,是垃圾管理的主要作用区,是线程共享的 2.栈(stack):①虚拟机栈:描述的是 Java ...

  3. 模拟python中的Yield伪并发

    并发,在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. #Yield伪并发 _author_= ...

  4. python函数的创建和函数参数

    [1]#函数的作用:1.减少重复代码 2.方便修改,更容易扩展3.保持代码的一致性 [2]#函数简单的定义规则: 函数代码块以def关键词开头,后接函数标识符名称和圆括号(),任何传入参数和自变量必须 ...

  5. .NET发送邮箱（验证码）

    先看下前端: 写代码前先设置: 一:登录QQ邮箱,点击设置 二: 三: //下面开始敲代码... //两个命名空间 //using System.Net; //using System.Net.Mai ...

  6. [java] 屏蔽ie浏览器中F1帮助

    实现某一功能时需要屏蔽IE浏览器中的F1,F2快捷键. 百度后发现如下代码 var jq$ = jQuery.noConflict(); //防止$符号与其他的冲突 jq$(document).rea ...

  7. Ajax总结一下

    一.什么是Ajax Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求.通俗的理解的话就是,如果没有Ajax技术,改变网页的一小 ...

  8. qt tcp 通信实例

    #include "mainwindow.h" #include "ui_mainwindow.h" #include <QHostAddress> ...

  9. Android 自定义TabHost，TabWidget样式

    界面比较简单,要想做得漂亮换几张图片就可以了. 第一步:先在布局(这里用了main.xml创建时自动生成的)里面放上TabHost ,只要将TabHost控件托至屏幕中就可: <?xml ver ...

  10. 安装hyperledger fabric V1.0.0-beta

      安装文档位置: https://github.com/hyperledger/fabric   fabric代码托管地址 https://hyperledger-fabric.readthedoc ...