阅读:3776回复:0
css3 实现动画效果,怎样使他无限循环动下去?<pre name="code" class="css"> 主要需要使用 -webkit-animation 如: -webkit-animation:gogogo 2s infinite linear ; 其中gogogo是自己定义的动画帧,2s是整个动画的秒数,infinite是永久循环 linear是线性变化 (step-end则是无线性变化,直接输出结果) 代码如下: CSS: @-webkit-keyframes gogogo { 0%{ -webkit-transform: rotate(0deg); border:5px solid red; } 50%{ -webkit-transform: rotate(180deg); background:black; border:5px solid yellow; } 100%{ -webkit-transform: rotate(360deg); background:white; border:5px solid red; } } .loading{ border:5px solid black; border-radius:40px; width: 28px; height: 188px; -webkit-animation:gogogo 2s infinite linear ; margin:100px; } |
|