gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1384
阅读:3776回复:0

css3 实现动画效果,怎样使他无限循环动下去?

楼主#
更多 发布于:2020-11-04 14:39

<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;
 
}
游客


返回顶部