CSS时钟案例

最新推荐文章于 2024-07-24 15:57:11 发布

xiaomohhh

最新推荐文章于 2024-07-24 15:57:11 发布

阅读量1.8k

点赞数 7

分类专栏： css 文章标签： css 时钟

本文链接：https://blog.csdn.net/xiaomohhh/article/details/99494216

版权

css 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

效果如下图
在这里插入图片描述
下面是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;
}

在这里插入图片描述
然后是画上刻度,给类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);
}

在这里插入图片描述
然后加一个圆,把中间的线遮住,给类roundness(公共样式—最后有个小圆会用到) circle添加样式

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

在这里插入图片描述
下面是给时、分、秒针，给类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);
    }
}

在这里插入图片描述
最后在中心加一个小圆

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

在这里插入图片描述

下面是完整代码

<!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>