【原创】使用纯CSS3制作一个无限循环的动画

寻技术 Html/CSS 2023年07月11日 88

实际效果:

 

 

主要是使用了

 -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;

}


  

 

关闭

用微信“扫一扫”