简单的时钟html

最新推荐文章于 2024-09-29 17:35:26 发布

鸦哈

最新推荐文章于 2024-09-29 17:35:26 发布

阅读量589

点赞数

分类专栏： html 文章标签： 1024程序员节 html 前端

本文链接：https://blog.csdn.net/qq_63482686/article/details/127493303

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先我将一个时钟分成了刻度(有12个)，时钟，分针，秒针，边框。

主要运用了animation这个动画。

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{font-size: 12px;margin: 0px;padding: 0px;}
        #clock{
            width: 600px;
            height: 600px;
            border: 15px solid black;
            border-radius: 50%;
            position: absolute;
            left: 650px;
            top: 100px;
            box-shadow: 10px 10px 100px 10px black;
            background-color: #c2c4d3;
        }
        .kd{

            width: 9px;
            height: 290px;
            border-top: 10px solid black;
            left: 299px;
            position: absolute;
            transform-origin: bottom center;
        }
        #kd0{

        }
        #kd1{

            transform: rotate(30deg);
        }
        #kd2{
            transform: rotate(60deg);
        }
        #kd3{
            transform: rotate(90deg);
        }
        #kd4{
            transform: rotate(120deg);
        }
        #kd5{
            transform: rotate(150deg);
        }
        #kd6{
            transform: rotate(180deg);
        }
        #kd7{
            transform: rotate(210deg);
        }
        #kd8{
            transform: rotate(240deg);
        }
        #kd9{
            transform: rotate(270deg);
        }
        #kd10{

            transform: rotate(300deg);
        }
        #kd11{
            transform: rotate(330deg);
        }
        #hour{
            width: 10px;
            height: 150px;
            background: black;
            opacity: 1;
            left: 305px;
            top: 150px;
            position: absolute;
            transform-origin: bottom center;
            animation: rotate 720s linear infinite;
        }
        #minute{
            width: 5px;
            height: 200px;
            background: cadetblue;
            opacity: 1;
            left: 305px;
            top: 100px;
            position: absolute;
            transform-origin: bottom center;
            animation: rotate 360s linear infinite;
        }
        #second{
            width: 3px;
            height: 250px;
            background: red;
            opacity: 1;
            left: 305px;
            top: 50px;
            position: absolute;
            transform-origin: bottom center;
            animation: rotate 60s linear infinite;
        }
        @keyframes rotate {
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
        #point{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border:2px solid black;
            position: absolute;
            left: 281px;
            top: 270px;
            opacity: 0.5;

        }
    </style>
</head>
<body>
<div id="clock">
    <div id="kd0" class="kd">12</div>
    <div id="kd1" class="kd">1</div>
    <div id="kd2" class="kd">2</div>
    <div id="kd3" class="kd">3</div>
    <div id="kd4" class="kd">4</div>
    <div id="kd5" class="kd">5</div>
    <div id="kd6" class="kd">6</div>
    <div id="kd7" class="kd">7</div>
    <div id="kd8" class="kd">8</div>
    <div id="kd9" class="kd">9</div>
    <div id="kd10" class="kd">10</div>
    <div id="kd11" class="kd">11</div>
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
    <div id="point"></div>
</div>
</body>
</html>

html部分

<div id="clock">
    <div id="kd0" class="kd">12</div>
    <div id="kd1" class="kd">1</div>
    <div id="kd2" class="kd">2</div>
    <div id="kd3" class="kd">3</div>
    <div id="kd4" class="kd">4</div>
    <div id="kd5" class="kd">5</div>
    <div id="kd6" class="kd">6</div>
    <div id="kd7" class="kd">7</div>
    <div id="kd8" class="kd">8</div>
    <div id="kd9" class="kd">9</div>
    <div id="kd10" class="kd">10</div>
    <div id="kd11" class="kd">11</div>
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
    <div id="point"></div>
</div>

表盘

*{font-size: 12px;margin: 0px;padding: 0px;}
#clock{
    width: 600px;
    height: 600px;
    border: 15px solid black;
    border-radius: 50%;
    position: absolute;
    left: 650px;
    top: 100px;
    box-shadow: 10px 10px 100px 10px black;
    background-color: #c2c4d3;
}

刻度css部分

.kd{

    width: 9px;
    height: 290px;
    border-top: 10px solid black;
    left: 299px;
    position: absolute;
    transform-origin: bottom center;
}
#kd0{

}
#kd1{

    transform: rotate(30deg);
}
#kd2{
    transform: rotate(60deg);
}
#kd3{
    transform: rotate(90deg);
}
#kd4{
    transform: rotate(120deg);
}
#kd5{
    transform: rotate(150deg);
}
#kd6{
    transform: rotate(180deg);
}
#kd7{
    transform: rotate(210deg);
}
#kd8{
    transform: rotate(240deg);
}
#kd9{
    transform: rotate(270deg);
}
#kd10{

    transform: rotate(300deg);
}
#kd11{
    transform: rotate(330deg);
}

时针

#hour{
    width: 10px;
    height: 150px;
    background: black;
    opacity: 1;
    left: 305px;
    top: 150px;
    position: absolute;
    transform-origin: bottom center;
    animation: rotate 720s linear infinite;
}

分针

#minute{
    width: 5px;
    height: 200px;
    background: cadetblue;
    opacity: 1;
    left: 305px;
    top: 100px;
    position: absolute;
    transform-origin: bottom center;
    animation: rotate 360s linear infinite;
}

秒

#second{
    width: 3px;
    height: 250px;
    background: red;
    opacity: 1;
    left: 305px;
    top: 50px;
    position: absolute;
    transform-origin: bottom center;
    animation: rotate 60s linear infinite;
}

动画

@keyframes rotate {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}

中间的点

#point{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border:2px solid black;
    position: absolute;
    left: 281px;
    top: 270px;
    opacity: 0.5;

}