css 利用animation和transform 设置鸭子表 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>表</title>
  6         <style>
  7             
  8             
  9             /* 设置关键帧 */
 10             @keyframes clock{
 11                 from{
 12                     transform: rotateZ(0);
 13                 }
 14                 to{
 15                     transform: rotateZ(1turn);
 16                 }
 17             }
 18             
 19             /* 设置表盘的样式 */
 20             .outer{
 21                 width: 500px;
 22                 height: 500px;
 23                 /* border: 10px solid black; */
 24                 border-radius: 50%;
 25                 margin: 0 auto;
 26                 
 27                 /* 设置背景图片 */
 28                 background: url(img/bg3.jpg) 0 0/cover;
 29                 
 30                 /* 开启相对定位 */
 31                 position: relative;
 32             }
 33             
 34             /* 设置秒针的样式 */
 35             .sec,
 36             .min,
 37             .hour{
 38                 /* 开启绝对定位 */
 39                 position: absolute;
 40                 width: 2px;
 41                 height: 46%;
 42                 background-color: #f00;
 43                 
 44                 left: 0;
 45                 right: 0;
 46                 bottom: 50%;
 47                 margin: 0 auto;
 48                 
 49                 /* 设置变形的原点 */
 50                 transform-origin: bottom;
 51                 
 52                 /* animation: clock 60s steps(60); */
 53             }
 54             
 55             /* 秒针 */
 56             .sec{
 57                 animation: clock 10s steps(60) infinite;
 58             }
 59             
 60             
 61             /* 分针 */
 62             .min{
 63                 width: 4px;
 64                 height: 42%;
 65                 background-color: #000;
 66                 
 67                 animation: clock 600s steps(60) infinite;
 68             }
 69             
 70             /* 时针 */
 71             .hour{
 72                 width: 6px;
 73                 height: 38%;
 74                 background-color: #000;
 75                 
 76                 animation: clock 7200s linear infinite;
 77             }
 78             
 79             
 80             
 81         </style>
 82     </head>
 83     <body>
 84         
 85         <!-- 创建表的外部容器 -->
 86         <div class="outer">
 87             
 88             <!-- 创建创建时针 -->
 89             <div class="hour"></div>
 90             
 91             <!-- 创建创建分针 -->
 92             <div class="min"></div>
 93             
 94             <!-- 创建秒针 -->
 95             <div class="sec"></div>
 96             
 97         </div>
 98         
 99         
100         
101     </body>
102 </html>

 

posted @ 2020-04-13 11:55  全情海洋  阅读(366)  评论(0)    收藏  举报