CSS3实现时钟图标 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .clock{
            width:300px;
            height: 300px;
            border:10px solid #ccc;
            border-radius:160px;
            margin: 100px auto;
            position: relative;
        }
        .line{
            width: 8px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            top:0;
            left:50%;
            transform:translate(-50%,0);
        }
        .line1{
            width: 10px;
        }
        .line2{
            transform: translate(-50%,0) rotate(30deg); 
        }
        .line3{
            transform: translate(-50%,0) rotate(60deg); 
        }
        .line4{
            width: 10px;
            transform: translate(-50%,0) rotate(90deg); 
        }
        .line5{
            transform: translate(-50%,0) rotate(120deg); 
        }
        .line6{
            transform: translate(-50%,0) rotate(150deg); 
        }
        .cover{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left:50%;
            top: 50%;
            transform:translate(-50%, -50%);
        }
        .hour{
            width: 6px;
            height: 80px;
            position: absolute;
            background-color: red;
            left: 50%;
            top: 50%;
            transform:translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockAnimation  linear  43200s infinite;  
        }
        .minute{
            width: 4px;
            height: 90px;
            position: absolute;
            background-color: green;
            left: 50%;
            top: 50%;
            transform:translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockAnimation  linear  3600s infinite;  
        }
        .second{
            width: 2px;
            height: 100px;
            position: absolute;
            background-color: red;
            left: 50%;
            top: 50%;
            transform:translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockAnimation  steps(60) 60s infinite;  
        }
        .center{
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;;
            left: 50%;
            top: 50%;
            transform:translate(-50%, -50%);
        }
        @keyframes clockAnimation{
            from{
                transform: translate(-50%, -100%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <div class="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="center"></div>
    </div>
</body>
</html>

 

posted @ 2019-05-16 20:59  进心进利  阅读(373)  评论(0)    收藏  举报