alternate 動畫會在廳數(shù)次數(shù)(1,3,5等等)正常播放，面在偶數(shù)次數(shù)(2，4，4)向后播放html>

Document

*{

padding:?0;

margin:?0;

}

#herhr{

display:?block;

margin:?10px?auto;

border:?1px?solid?blue;

/*transform:?rotate(60deg);???infinite讓它一直轉*/

/*animation:?hger??10s?linear?infinite;*/

/*alternate?動畫會在廳數(shù)次數(shù)(1,3,5等等)正常播放，面在偶數(shù)次數(shù)(2，4，4)向后播放。*/

/*animation:?hger??5s?linear?infinite?alternate;*/

animation:?hger??10s?linear?infinite;

/*給圖片加個圓角*/

border-radius:?60%;

}

#herhr:hover{

/*play?游戲????state??規(guī)定???paused??暫停??當鼠標放在轉盤的時候暫停的意思*/

animation-play-state:?paused;

}

@keyframes?hger{

from{

transform:?rotate(0deg);

}

to{

transform:?rotate(360deg);

}

}

????

總結

以上是生活随笔為你收集整理的css3动大转盘,css3的animation大转盘写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。