CSS练习题——3.时钟

本文链接： https://blog.csdn.net/qq_40686529/article/details/102702646

1.需求：

2.分析

时钟分为表框，12个刻度，时分秒针。

① 表框可以用大的box。

② 刻度可以先写好一根刻度，剩下5根只需要进行旋转30°，60°....再用一个白色的cover覆盖中间位置，就把表框和刻度做完了。

③ 时分秒针，中间圆点都是一个div，只需要用left,margin,tranform进行定位就行了。

3.完整代码（注释详细）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border:6px solid #ccc;
            border-radius:203px; 
            position: relative;
        }
        /* box里div的公用属性 */
        .box>*{
            position: absolute;
        }
        .line{
            width: 6px;
            height: 200px;
            border: 1px solid #ccc;
            background: #ccc;
            /*刻度线居中*/
            left: 50%;
            top:0%;
            /*向左移刻度的50%*/
            transform: translate(-50%);
        }
        /*下面5条刻度样式基本相同*/
        .line2{
            transform: translate(-50%) rotate(30deg);
        }
        .line3{
            transform: translate(-50%) rotate(60deg);
        }
        .line4{
            transform: translate(-50%) rotate(90deg);
        }
        .line5{
            transform: translate(-50%) rotate(120deg);
        }
        .line6{
            transform: translate(-50%) rotate(150deg);
        }
        .cover{
            width: 180px;
            height: 180px;
            background:#FFF;
            border-radius: 100%;
            margin: 5%;
        }
        .hour{
            width: 8px;
            height: 50px;
            background: #591b2d;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            /* 改变旋转中心 */
            transform-origin: center bottom;
            /* 60s完成 匀速 无限循环 */
            animation: animationColor 43200s linear infinite;
        }
        .minute{
            width: 4px;
            height: 60px;
            background: blue;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            /* 改变旋转中心 */
            transform-origin: center bottom;
            /* 3600s完成 匀速 无限循环 */
            animation: animationColor 3600s linear infinite;
        }
        .second{
            width: 2px;
            height: 70px;
            background: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            /* 60s完成 匀速 无限循环 */
            animation: animationColor 60s linear infinite;
            /* 改变旋转中心 */
            transform-origin: center bottom;
            /* 旋转分60步完成，不能与匀速写在一起，会冲突 */
            animation-timing-function: steps(60);
        }
        @keyframes animationColor{
            0%{
                /* 这部分因为在second里设置了tranform，所以必须把以前的样式带上，不然会发生覆盖 */
                transform: translate(-50%,-100%) rotate(0deg); 
            }
            100%{
                transform: translate(-50%,-100%) rotate(360deg);
            }
        }
        .center{
            width: 20px;
            height: 20px;
            background: #ccc;
            border-radius: 100%;
            margin: 50% 50%;
            transform: translate(-50%,-50%);
        }
    </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="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="center"></div>
    </div>
</body>
</html>

CSS练习题——3.时钟

1.需求：

2.分析

3.完整代码（注释详细）

猜你喜欢