CSS 利用动画制作表盘

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸭子表title>
    <style>
        *{
      
            margin:0;
            padding:0;
        }
        /* 设置表的容器 */
        .clock{
      
            width: 500px;
            height: 500px;
            margin:0 auto;
            margin-top:100px;
            border-radius: 50%;
            /* border:10px solid black; */
            position: relative;
            background-image: url(./pic/1024px-Analogue_clock_face.svg.png);
            background-size: cover;
        }
        /* 设置里面所有的div都垂直水平居中 */
        .clock > div{
      
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        /* 设置时针 */
        .hour-wrapper{
      
            height: 65%;
            width: 65%;
            animation: run 43200s linear infinite;
        }
        .hour{
      
            height: 50%;
            width: 6px;
            background-color: black;
            margin:0 auto;  
        }
        /* 设置分针样式 */
        .min-wrapper{
      
            height: 75%;
            width: 75%;
            animation: run 3600s steps(60) infinite;
        }  
        .min{
      
            height: 50%;
            width: 4px;
            background-color: black;
            margin:0 auto;  
        }

         /* 设置秒针样式 */
         .sec-wrapper{
      
            height: 85%;
            width: 85%;
            animation: run 60s steps(60) infinite;
        }
        .sec{
      
            height: 50%;
            width: 2px;
            background-color: silver;
            margin:0 auto;  
           
        }
        /* 旋转的关键帧 */
        @keyframes run{
      
            from{
      
                transform:rotateZ(0);
            }

            to{
      
                transform:rotateZ(360deg);
            }
        }
    style>
head>
<body>
    
    <div class="clock">
        
        <div class="hour-wrapper">
            
            <div class="hour">div>
        div>
        
        <div class="min-wrapper">
            
            <div class="min">div>
        div>
        
        
        <div class="sec-wrapper">
            
            <div class="sec">div>
        div>
    div>
    

body>
html>

你可能感兴趣的:(前端,css)