其他分享
首页 > 其他分享> > transform钟表动画

transform钟表动画

作者:互联网

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   div{
    box-sizing: border-box;
   }
   #clock{
    width: 200px;
    height: 200px;
    border: 4px solid brown;
    border-radius: 50%;
    position: relative;
   }
   #minute{
    width: 6px;
    height: 60px;
    background-color: orangered;
    position: absolute;
    top: 40px;
    left: 94px;
    /*更换圆心点*/
    transform-origin: bottom;
    /*调用动画*/
    -webkit-animation: run 3600s linear 0s infinite;
   }
   #second{
    width: 4px;
    height: 80px;
    background-color: cadetblue;
    position: absolute;
    top: 20px;
    left: 95px;
    /*更换圆心点*/
    transform-origin: bottom;
    /*调用动画*/
    -webkit-animation: run 60s linear 0s infinite;
   }
   
   
   /*声明动画*/
   @-webkit-keyframes run{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
   }
  </style>
 </head>
 <body>
  <div id="clock">
   <div id="minute"></div>
   <div id="second"></div>
  </div>
 </body>
</html>

标签:动画,run,transform,height,width,钟表,border
来源: https://www.cnblogs.com/KiligYou/p/11060754.html