前端基础学习-（5）简易时钟实现

最新推荐文章于 2024-05-07 09:15:00 发布

形同陌路love

最新推荐文章于 2024-05-07 09:15:00 发布

阅读量414

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/YYLOVEYY520/article/details/113530822

版权

前端基础学习-（5）简易时钟实现

作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了定位(position)、背景图片以及动画等知识。其中需要注意时针、分针、秒针的实现方式。

实现效果

在这里插入图片描述

代码实现

html代码如下:
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/时钟.css">
</head>

<body>
    <div class="clock">
        <div class="hour_wrapper">
            <div class="hour"></div>
        </div>
        <div class="min_wrapper">
            <div class="min"></div>
        </div>
        <div class="sec_wrapper">
            <div class="sec"></div>
        </div>
    </div>
</body>

</html>

时钟基本样式
.clock {
    height: 500px;
    width: 500px;
    margin: 100px auto;
    border-radius: 50%;
    position: relative;
    /* 设置时钟图片背景 */
    background-image: url(../images/clock.png);
    /* 设置时钟图片样式 */
    background-size: cover;
}

.clock>div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.hour_wrapper {
    height: 50%;
    width: 50%;
    border-radius: 50%;
    /* 设置动画执行时间、匀速运动，重复运动 */
    animation: 3600s * 12 run linear infinite;
}

.hour {
    width: 6px;
    height: 50%;
    background-color: black;
    margin: 0 auto;
}

.min_wrapper {
    height: 60%;
    width: 60%;
    border-radius: 50%;
    animation: 3600s run linear infinite;
}

.min {
    width: 4px;
    height: 50%;
    background-color: black;
    margin: 0 auto;
}

.sec_wrapper {
    height: 70%;
    width: 70%;
    border-radius: 50%;
    /* 设置秒针匀速滚动 */
    animation: 60s run infinite;
    /* 设置秒针跳转滚动 */
    /* animation: 60s run steps(60) infinite; */
}

.sec {
    width: 2px;
    height: 50%;
    background-color: red;
    margin: 0 auto;
}

/* 设置关键帧旋转一圈 */
@keyframes run {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(360deg);
    }
}

形同陌路love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习-（5）简易时钟实现

前端基础学习-（5）简易时钟实现作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了定位(position)、背景图片以及动画等知识。其中需要注意时针、分针、秒针的实现方式。实现效果代码实现html代码如下:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
复制链接

扫一扫