CSS3性能体验
如今许多新技术名词在不断的被提及中，已然向我们靠近。
某篮球运动员说了：“变向过人”不是超级明星的专利，也许我也可以试着去做，现在看起来效果还不错...
那么，现在我们来体验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性能体验的更多相关文章
- 提升html5的性能体验系列之三流畅下拉刷新
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升HTML5的性能体验系列之二 列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
- 提升HTML5的性能体验系列之一 避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]
webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...
- 提升html5的性能体验系列之四使用原生ui
原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求. ...
- 提升html5的性能体验系列之二列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...
随机推荐
- TP5实现邮件发送（PHP 利用QQ邮箱发送邮件「PHPMailer」）
在 PHP 应用开发中,往往需要验证用户邮箱.发送消息通知,而使用 PHP 内置的 mail() 函数,则需要邮件系统的支持. 如果熟悉 IMAP/SMTP 协议,结合 Socket 功能就可以编写邮 ...
- MySQL完整性约束foreign key与表操作。
一 MySQL中表的完整性约束: 我们首先知道约束条件跟类型的宽度一样,都是可选的,也就是说,我们在创建表的时候可以不指定,但是为了创建的表更加的完整,我们一般会加一些约束条件,name下面我们讲一 ...
- 自动创建表出错 type=InnDB
因为type=InnoDB在5.0以前是可以使用的,但5.1之后就不行了 只需要修改配置: hibernate.dialect=org.hibernate.dialect.MySQLInnoDBDia ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- 【Linux】【Jenkins】Jenkins安装和配置等
Jenkins配置详解: http://lib.csdn.net/article/git/18342 Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功 ...
- 【Selenium-WebDriver问题篇】Selenium实现元素的拖拽（java版）（转）
https://blog.csdn.net/u010503127/article/details/51381284 Selenium实现元素的拖拽(java版) [前言] 自从淘宝网登陆页出现滑块验证 ...
- StanFord ML 笔记 第八部分
第八部分内容: 1.正则化Regularization 2.在线学习(Online Learning) 3.ML 经验 1.正则化Regularization 1.1通俗解释 引用知乎作者:刑无刀 ...
- 关于QTcreator出现不能包含头文件的解决
调试出现不能包含“某某.h文件”当增加次文件时候,还会出现另一个不能包含“某某.h”文件. 问题解决:由于VS2015和QT的冲突导致(不完全),下载不关联VS的QT版本再进行安装就可以啦.
- Linux下安装PHP+Nginx+Msql
安装Nginx: 1.先指定个文件存放位置 usr/local/src 2. 下载nginx, wget http://nginx.org/download/nginx-1.12.0.tar.gz ...
- CentOS7离线安装TIDB
首先准备一台能够联网,并且操作系统版本与正式版本完全一致的服务器. 安装思路是,通过在线方式获得所有离线安装包,然后导入到正式安装环境中去. yum install -y --downloadonly ...