你的位置:首页 > 软件开发 > 网页设计 > CSS知识总结(九)

CSS知识总结(九)

发布时间:2016-08-16 12:00:05
CSS常用样式 10.自定义动画  1)关键帧(keyframes)    被称为关键帧,其类似于Flash中的关键帧。    在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{ ...

CSS常用样式

 

10.自定义动画

  1)关键帧keyframes

    被称为关键帧,其类似于Flash中的关键帧。

    在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

    语法:@keyframes animationname {keyframes-selector {css-styles;}}

    animationname:定义动画的名称。

    keyframes-selector:以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。建议定义百分比选择器。

    css-styles:通过 @keyframes 规则,您能够创建动画,就是将一套 CSS 样式逐渐变化为另一套样式,并且能够多次改变这套 CSS 样式。

    兼容性:目前浏览器都不支持@keyframes规则,需要加上前缀"-moz-","-o-","-webkit-"。

    例子:

@-webkit-keyframes FromLeftToRight{  /* Safari 和 Chrome */  0% {left:0;}  100% {left:800px;} }@-moz-keyframes FromLeftToRight{  /* Firefox */  0% {left:0;}  100% {left:800px;} }@-o-keyframes FromLeftToRight{   /* Opera */  0% {left:0;}  100% {left:800px;} }@keyframes FromLeftToRight{   0% {left:0;}  100% {left:800px;} }

原标题:CSS知识总结(九)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。