transform钟表动画

最新推荐文章于 2022-08-04 18:05:55 发布

weixin_30565327

最新推荐文章于 2022-08-04 18:05:55 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/KiligYou/p/11060754.html

此博客展示了用HTML和CSS实现时钟动画的代码。通过HTML构建时钟的基本结构，利用CSS设置样式和动画效果，如设置时钟的大小、边框、指针样式，并使用动画让指针旋转，实现时钟的动态效果。

<!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>