实际效果:
主要是使用了
-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; }