【原創】使用純CSS3制作一個無限循環的動畫

實際效果：

 

 

主要是使用了

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

}