码上敲享录 > HTML+CSS实战 > 前端页面实现点环绕运动

前端页面实现点环绕运动

上一章章节目录下一章 2020-04-21已有1436人阅读 评论(0)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>前端页面实现点环绕运动</title>

</head>

<style>

ul#countdown {

       text-align: center;

       margin: 2em 0 2em;


   }


   ul#countdown li {

       display: inline-block;

       margin-right: 28px;

       width: 85px;

       height: 85px;

       text-align: center;

       padding: 12px;

       border: 1px solid #2be0f0;

       border-radius:50%;

       -webkit-border-radius:50%;

       -moz-border-radius:50%;

       position: relative;

   }

ul#countdown li i{  


       width: 85px;

       height: 85px;  

       position: absolute;  

       display: block;

       /*旋转动画*/  

       animation:circleRoate 5s infinite linear ;  

       

   }  

   .dotdot{  

       position: absolute;  

       left:-2px;  

       width: 10px;  

       height: 10px;  

       border-radius: 50%;

       background:#ff6200;  

   }  

   @keyframes circleRoate{  

       from{transform: rotate(0deg);}  

       to{transform: rotate(360deg);}  

   }

   </style>

<body>

<ul id="countdown">

           <li>

               <i><b class="dotdot" style="background: #00ADEE;"></b></i>

             

           </li>

           

       </ul>



</body>

</html>


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交