电子时钟（基于CSS3动画transform）

最新推荐文章于 2024-11-02 10:41:38 发布

chen__cheng

最新推荐文章于 2024-11-02 10:41:38 发布

阅读量422

点赞数

CC 4.0 BY-SA版权

分类专栏： # 案例文章标签： CSS

本文链接：https://blog.youkuaiyun.com/chen__cheng/article/details/116548112

案例专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何使用CSS实现一个具有时、分、秒指针的时钟动画。通过创建不同类别的div元素，结合伪类和绝对定位，设置渐变背景和旋转变换，实现了时钟的外观和动态效果。时钟包括了小时、分钟和秒钟的指针，且秒钟在鼠标悬停时会完整旋转一圈，提供了一个交互式的体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果预览：
transform_09

实现思路：使用一个盒子.clock作为时钟地盘，并为当前盒子添加伪类使其在当前盒子内部进行显示，并遮住当前盒子内部部分，再利用.line盒子进行刻度绘制，最后还需要一个盒子遮住里面多余的线条，最后再绘制时分秒。

实现代码：
html

 <div class="clock">
        <div class="line">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>

css

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2C3A47 ;
}

/*最外层的时钟边缘部分*/
.clock {
    width: 400px;
    height: 400px;
    background: linear-gradient(to right, #EAB543,#F8EFBA,#FEA47F,#F97F51);
    border-radius: 50%;
    position: relative;
    z-index: -2;
}

/*时钟罩住部分*/
.clock::after {
    content: "";
    width: 80%;
    height: 80%;
    background: #2C3A47;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.line {
    position: absolute;
    width: 70%;
    height: 70%;
    background: #2C3A47;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

/*给每一根线条设置高度*/
.line div{
    width: 100%;
    height: 5px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0%;
    transform-origin: 50% 50%;
}

/*旋转每一根线条*/
.line>div:nth-child(1) {
    transform: rotate(0deg);
}

.line>div:nth-child(2) {
    transform: rotate(30deg);
}

.line>div:nth-child(3) {
    transform: rotate(60deg);
}

.line>div:nth-child(4) {
    transform: rotate(90deg);
}

.line>div:nth-child(5) {
    transform: rotate(120deg);
}

.line>div:nth-child(6) {
    transform: rotate(150deg);
}

/*遮住中间线条*/
.line::before {
    content: "";
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #2C3A47;
    z-index: 2;
    border-radius: 50%;
}

/*设置时钟中心旋转点*/
.line::after {
    content: "";
    width: 5%;
    height: 5%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #D980FA;
    z-index: 2;
    border-radius: 50%;
}

/*设置时  注意 该元素父元素为clock*/
.clock .hour {
    width: 15%;
    height: 2%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: left bottom;
    transform: translate(-5%,-50%);
    background: #D980FA;
    z-index: 2;
}

/*设置分  注意 该元素父元素为clock*/
.clock .minute {
    width: 23%;
    height: 2%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: left bottom;
    transform: translate(0%,-50%) rotate(-60deg);
    background: #D980FA;
    z-index: 2;
}

/*设置秒  注意 该元素父元素为clock*/
.clock .second {
    width: 30%;
    height: 1%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: left bottom;
    transform: translate(0%,0%) rotate(-60deg);
    transition: 60s steps(60,start);
    background: #D6A2E8;
    z-index: 10;
}

/*当鼠标悬浮时 秒钟旋转*/
body:hover .second {
    transform: translate(0%,-50%) rotate(360deg);
}