您当前位置：首页 > web前端 > htmlcss > 使用纯CSS3实现转动时钟案例

使用纯CSS3实现转动时钟案例

来源：程序员人生发布时间：2017-02-06 08:11:59 阅读次数：4351次

使用纯CSS3属性来实现转动时钟

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF⑻">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 10px solid #ccc;
            border-radius: 110px;
            margin: 100px auto;
            position: relative;
        }
        .line {
            width: 4px;
            height: 200px;
            background: #ccc;
            position: absolute;
            left: 50%;
            margin-left: ⑵px;
        }
        /*时钟刻度线*/
        .line1 {
            transform: rotate(30deg);
        }
        .line2 {
            transform: rotate(60deg);
        }
        .line3 {
            transform: rotate(90deg);
        }
        .line4 {
            transform: rotate(120deg);
        }
        .line5 {
            transform: rotate(150deg);
        }
        .line6 {
            transform: rotate(180deg);
        }
        /*将刻度线遮住，只留1点点*/
        .mask {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 90px;
            position: absolute;
            margin: 10px;
        }
        /*时针*/
        .hour {
            width: 8px;
            height: 50px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: ⑷px;
            margin-top: ⑸0px;
            /*43200s匀速转动1圈*/
            animation: move 43200s linear infinite;
            /*设置旋转的中心点为中间底部*/
            transform-origin: center bottom;
        }
        /*分针*/
        .minute {
            width: 6px;
            height: 60px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: ⑶px;
            margin-top: ⑹0px;
            /*3600s转1圈，匀速转动*/
            animation: move 3600s linear infinite;
            /*设置旋转的中心点为中间底部*/
            transform-origin: center bottom;
        }
        /*秒针*/
        .second {
            width: 4px;
            height: 80px;
            background: yellow;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: ⑵px;
            margin-top: ⑻0px;
            /*60s转1圈，分60步*/
            animation: move 60s infinite steps(60);
            /*设置旋转的中心点为中间底部*/
            transform-origin: center bottom;
        }
        /*最中心的遮罩层*/
        .circle {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background: #ccc;
            position: absolute;
            left: 50%;
            margin-left: ⑹px;
            margin-top: 90px;
        }
        /*旋转从0度到360度*/
        @keyframes move {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
<div class="box">
    <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="mask"></div>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
    <div class="circle"></div>
</div>
</body>
</html>

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 属性动画资料文件如何编写？property-animation资源文件属性动画如何自定义TypeEvaluator

下一篇 [置顶] 【稀饭】react native 实战系列教程之热更新原理分析与实现

分享到:

------分隔线----------------------------

女人不婊男人不爱

积分：219

8粉丝

13关注

栏目热点