CSS3圆圈旋转的样式

最新推荐文章于 2024-05-14 16:37:25 发布

零度空间0520

最新推荐文章于 2024-05-14 16:37:25 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/dududu01/article/details/47299069

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">


           #loading{
                color:#000;
                border-width: 4px;
                width: 40px;
                height: 40px;
               border-style: solid;
                border-color: #ccc #eee red blue;
                border-radius: 24px;
                 -webkit-animation: "loading" 1s infinite linear;/***一秒循环执行**/

       }
       @-webkit-keyframes "loading"{/**关键帧名称**/
                0%{-webkit-transform: rotate(0deg);}
                100%{-webkit-transform: rotate(360deg);}
       }

       </style>
   </head>

   <body>
       <div id="loading"></div>
   </body>

</html>