MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » css3新增卡通片

css3新增卡通片

www.MyException.Cn  网友分享于:2013-10-16  浏览:0次
css3新增动画

1、transiition过渡:样式改变就会执行transition

(1)格式:transiition:1s width linear,2s 1s height;

(2)参数:

  • transition-property  要运动的样式  (all || [attr] || none)
  • transition-duration 运动时间

  • transition-delay 延迟时间

  • transition-timing-function 运动形式

ease:(逐渐变慢)默认值

linear:(匀速)

ease-in:(加速)

ease-out:(减速)

ease-in-out:(先加速后减速)

cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )http://matthewlein.com/ceaser/

(3)过渡完成事件

  • Webkit内核: obj.addEventListener('webkitTransitionEnd',function(){

 

  • },false);
  • firefox: obj.addEventListener('transitionend',function(){

 

  • },false); 

2、transform2D

(1)格式:transiition:1s width linear,2s 1s height;

(2)参数:

  • rotate() 旋转函数 取值度数

deg 度数

  • skew() 倾斜函数 取值度数

skewX()

skewY()

  • scale() 缩放函数 取值 正数、负数和小数

scaleX()

scaleY()

  • translate() 位移函数

translateX()

translateY()

  • transform-origin 旋转的基点(left top左上角)

(3)注意:Transform 执行顺序问题 — 后写先执行

(4)matrix(a,b,c,d,e,f) 矩阵函数

  默认:matrix(1,0,0,1,0,0)

  • 通过矩阵实现缩放

x轴缩放 a=x*a c=x*c e=x*e;

y轴缩放 b=y*b d=y*d f=y*f;

  • 通过矩阵实现位移(ie下没有)

x轴位移: e=e+x

y轴位移: f=f+y

  • 通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

  • 通过矩阵实现旋转

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

(5)变换兼容IE9以下IE版本只能通过矩阵来实现 

  • filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
  • IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

(6)IE下基点修正

obj.style.left=(obj.parentNode.offsetWidth-obj.offsetWidth)/2+"px";
obj.style.top=(obj.parentNode.offsetHeight-obj.offsetHeight)/2+"px";

3、transform3D

(1)参数

  • transform-style(preserve-3d) 建立3D空间
  • Perspective 景深
  • Perspective- origin 景深基点
  • Transform 新增函数

rotateX():水平

rotateY():竖直

rotateZ():垂直于屏幕

translateZ():正值放大,负值缩小

scaleZ()

4、animation

 

(1)关键帧的时间单位

  • 数字:0%、25%、100%等
  • 字符:from(0%)、to(100%)

 

(2)格式

 

  • @keyframes 动画名称 {

        动画状态

  }

  • @keyframes miaov_test {

         from { background:red; }

         to { background:green; }

   }

(3)参数

  • 必要属性

animation-name 动画名称(关键帧名称)

animation-duration 动画持续时间

例如: -webkit-animation-name: ‘m'; -webkit-animation-duration: 4s;

  • 可选属性

  • animation-timing-function 动画运动形式

 

linear 匀速。

 

 

ease 缓冲。

 

 

ease-in 由慢到快。

 

 

ease-out 由快到慢。

 

 

ease-in-out 由慢到快再到慢。

 

 

cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

 

  • animation-delay 动画延迟 只是第一次

  • animation-iteration-count 重复次数——infinite为无限次

  • animation-direction 播放前重置

 

动画是否重置后再开始播放

 

 

alternate 动画直接从上一次停止的位置开始执行

 

 

normal 动画第二次直接跳到0%的状态开始执行

 

  • animation-play-state 播放状态( running 播放 和paused 暂停 )

 

1楼悟空前端
一起学习交流的前端html5技术交流,解答、群 250777811 群文件上传了很多的项目实战,大家可以练练手

文章评论

Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
那些争议最大的编程观点
那些争议最大的编程观点
代码女神横空出世
代码女神横空出世
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
中美印日四国程序员比较
中美印日四国程序员比较
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员必看的十大电影
程序员必看的十大电影
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员都该阅读的书
程序员都该阅读的书
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
如何成为一名黑客
如何成为一名黑客
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
老程序员的下场
老程序员的下场
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Java程序员必看电影
Java程序员必看电影
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我是如何打败拖延症的
我是如何打败拖延症的
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
10个调试和排错的小建议
10个调试和排错的小建议
编程语言是女人
编程语言是女人
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
一个程序员的时间管理
一个程序员的时间管理
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
 程序员的样子
程序员的样子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
总结2014中国互联网十大段子
总结2014中国互联网十大段子
鲜为人知的编程真相
鲜为人知的编程真相
程序员和编码员之间的区别
程序员和编码员之间的区别
每天工作4小时的程序员
每天工作4小时的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有