欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS时钟案例

程序员文章站 2022-05-28 09:04:11
...

效果如下图
CSS时钟案例
下面是html代码

<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="roundness circle"></div>
    <div class="needle hour"></div>
    <div class="needle minute"></div>
    <div class="needle second"></div>
    <div class="roundness cir"></div>
</div>

首先是外圆,给类box添加样式

.box {
    margin: 100px auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px solid #cccccc;
    position: relative;
}

CSS时钟案例
然后是画上刻度,给类line，line1 — line6添加样式

.box > .line {
    height: 300px;
    width: 10px;
    position: absolute;
    background-color: #cccccc;
    left: 50%;
    transform: translate(-50%, 0);
}
.box > .line2 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(30deg);
}
.box > .line3 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(60deg);
}
.box > .line4 {
    transform: translate(-50%, 0) rotateZ(90deg);
}
.box > .line5 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(120deg);
}
.box > .line6 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(150deg);
}

CSS时钟案例
然后加一个圆,把中间的线遮住,给类roundness(公共样式—最后有个小圆会用到) circle添加样式

.roundness {
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.circle {
    width: 270px;
    height: 270px;
    background-color: #fff;
}

CSS时钟案例
下面是给时、分、秒针，给类needle(公共样式) hour minute second添加样式，并添加动画效果

.needle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
}
.hour {
    width: 10px;
    height: 70px;
    background-color: limegreen;
    border-radius: 5px 5px;
    /*设置旋转轴心*/
    transform-origin: center bottom;
    /*添加动画*/
    animation: clockanimation 43200s linear infinite;
}
.minute {
    width: 7px;
    height: 90px;
    background-color: yellow;
    border-radius: 3.5px 3.5px;
    /*设置旋转轴心*/
    transform-origin: center bottom;
    /*添加动画*/
    animation: clockanimation 3600s linear infinite;
}
.second {
    width: 4px;
    height: 110px;
    background-color: red;
    border-radius: 2px 2px;
    /*设置旋转轴心*/
    transform-origin: center bottom;
    /*添加动画*/
    animation: clockanimation 60s linear infinite ;
}
@keyframes clockanimation {
    0% {
        transform: translate(-50%, -100%);
    }
    100% {
        transform: translate(-50%, -100%) rotate(360deg);
    }
}

CSS时钟案例
最后在中心加一个小圆

.cir {
    width: 20px;
    height: 20px;
    background-color: #ccc;
}

CSS时钟案例

下面是完整代码 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid #cccccc;
            position: relative;
        }
        .box>.line {
            height: 300px;
            width: 10px;
            position: absolute;
            background-color: #cccccc;
            left: 50%;
            transform: translate(-50%, 0);
        }
        .box>.line2 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(30deg);
        }
        .box>.line3 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(60deg);
        }
        .box>.line4 {
            transform: translate(-50%, 0) rotateZ(90deg);
        }
        .box>.line5 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(120deg);
        }
        .box>.line6 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(150deg);
        }
        .roundness {
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .circle {
            width: 270px;
            height: 270px;
            background-color: #fff;
        }
        .needle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%);
        }
        .hour {
            width: 10px;
            height: 70px;
            background-color: limegreen;
            border-radius: 5px 5px;
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            animation: clockanimation 43200s linear infinite;
        }
        .minute {
            width: 7px;
            height: 90px;
            background-color: yellow;
            border-radius: 3.5px 3.5px;
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            animation: clockanimation 3600s linear infinite;
        }
        .second {
            width: 4px;
            height: 110px;
            background-color: red;
            border-radius: 2px 2px;
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            animation: clockanimation 60s linear infinite;
        }
        @keyframes clockanimation {
            0% {
                transform: translate(-50%, -100%);
            }
            100% {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
        .cir {
            width: 20px;
            height: 20px;
            background-color: #ccc;
        }
    </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="roundness circle"></div>
        <div class="needle hour"></div>
        <div class="needle minute"></div>
        <div class="needle second"></div>
        <div class="roundness cir"></div>
    </div>
</body>
</html>
相关标签： css 时钟

上一篇： 2018群星MARS大赛报名结束 五千余项目展开角逐

下一篇： HTML之HTML5增强表单标签

推荐阅读