360度不停旋转动画demo效果示例（整理）

知秋~

已于 2022-06-14 13:38:56 修改

阅读量1.4k

点赞数 1

文章标签： 360度不停歇旋转

于 2018-01-04 11:38:58 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/78969253

版权

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>360度不停旋转动画</title>
       <style>
           #audio_btn {
               width: 30px;
               height: 30px;
               background: red;
               /*border-radius: 60px;*/
               float: left;
           }

           .rotate {
               -webkit-animation: rotating 2s linear infinite;
               -moz-animation: rotating 2s linear infinite;
               -o-animation: rotating 2s linear infinite;
               animation: rotating 2s linear infinite
           }

           @-webkit-keyframes rotating {
               from {
                   -webkit-transform: rotate(0)
               }

               to {
                   -webkit-transform: rotate(360deg)
               }
           }

           @keyframes rotating {
               from {
                   transform: rotate(0)
               }

               to {
                   transform: rotate(360deg)
               }
           }

           @-moz-keyframes rotating {
               from {
                   -moz-transform: rotate(0)
               }

               to {
                   -moz-transform: rotate(360deg)
               }
           }
       </style>

   </head>
   <body>
       <div id="audio_btn" class="rotate"></div>
   </body>
</html>

知秋~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
360度不停旋转动画demo效果示例（整理）

360度不停旋转动画#audio_btn { width: 30px; height: 30px; background: red; /*border-radius: 60px;*/ float: left;} .rotate { -webkit-animation: ro
复制链接

扫一扫