今天学习css3动画
来源：互联网 发布：excel筛选数据后复制 编辑：程序博客网 时间：2024/06/01 10:19
录制了一段视频，不过没找到怎么上传，非常抱歉
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="mantishell"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title></title> <style type="text/css">div{width:100px;height:100px;background:red;position:relative;/*属性规定元素的定位类型；1.absolute：生成决定定位的元素，相对于static定位以外的第一个父元素进行定位。元素通过left top right bottom属性进行规定。2.fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left top right bottom属性进行规定3.relative:生成相对定位的元素，相对于其正常位置进行定位。4.static：默认值，没有定位。5.inherit：规定应该从父元素继承position属性的值。*/animation-name:myfirst;/*规定 @keyframes 动画的名称。*/animation-duration:20s;/*规定动画完成一个周期所花费的秒或毫秒。默认是0。*/animation-timing-function:ease;/*规定动画的速度曲线。默认是ease。1.linear：动画从头到尾的速度是相同的。2.ease：默认。动画以低俗开始，然后加快，在结束前变慢。3.ease-in:动画以低速开始。4.ease-out：动画以低速结束。5.dase-in-out：动画以低速开始和结束。6.cubic-bezier(n,n,n,n):在cubic-bezier函数中自己的值。可能的值从0到1的数值。*/animation-delay:20;/*规定动画何时开始。默认是0*/animation-iteration-count:infinite;/*规定动画被播放的次数。默认是1,infinite-无限次播放*/animation-direction:alternate;/*规定动画是否在下一周期逆向的播放。默认是normal。1.normal：默认值。动画应该正常播放。2.动画应该轮流反向播放。*/animation-play-state:running;/*规定动画是否正在运行或暂停。默认是running.1.paused:动画已暂停。2.running：动画正在播放。*//*Firefox*/-moz-animation-name:myfirst;-moz-animation-duration:10s;-moz-animation-timing-function:linear;-moz-animation-delay:2s;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate;-moz-animation-play-state:running;/*Safari and Chrome*/-webkit-animation-name:myfirst;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;/*Opera*/-o-animation-name:myfirst;-o-animation-duration:5s;-o-animation-timing-function:linear;-o-animation-delay:2s;-o-animation-iteration-count:infinite;-o-animation-direction:alternate;-o-animation-play-state:running;}@keyframes myfirst{0% {background:red;left:0px;top:0px;}25% {background:yellow;left:200px;top:0px;}50% {background:blue;left:200px;top:200px;}75% {background:green;left:0px;top:200px;}100% {background:red;left:0px;top:0px;}}/*firefox*/@-moz-keyframes myfirst {0% {background:red;left:0px;top:0px;}25% {background:yellow;left:200px;top:0px;}50% {background:blue;left:200px;top:200px;}75% {background:green;left:0px;top:200px;}100% {background:red;left:0px;top:0px;}}/*Safari and Chrome*/@-webkit-keyframes myfirst {0% {background:red;left:0px;top:0px;}25% {background:yellow;left:200px;top:0px;}50% {background:blue;left:200px;top:200px;}75% {background:green;left:0px;top:200px;}100% {background:red;left:0px;top:0px;}}/*Opera*/@-o-keyframes myfirst {0% {background:red;left:0px;top:0px;}25% {background:yellow;left:200px;top:0px;}50% {background:blue;left:200px;top:200px;}75% {background:green;left:0px;top:200px;}100% {background:red;left:0px;top:0px;}} </style> </head> <body> <div></div> </body></html>
