html + css3 制作简易时钟

Posted 2022-02-22 岁月可贵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html + css3 制作简易时钟相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html + css3 制作简易时钟</title>
    <link rel="stylesheet" href="./css/clock.css">
</head>
<body>
    <h3>html + css3 制作简易时钟 </h3>
    <div class="clock">
        <!-- 背景 -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 时分秒 -->
        <div class="hour"></div>
        <div class="min"></div>
        <div class="second"></div>
        <!-- 内圆 -->
        <div class="inner-circle-1"></div>
        <div class="inner-circle-2"></div>
    </div>


</body>
</html>

body , ul 
    margin: 0;

h3 
    text-align: center;

ul 
    padding: 0;
    list-style: none;

.clock 
    width: 400px;
    height: 400px;
    background-color: #ccc;
    margin: 100px auto;
    position: relative;
    border: 10px solid deepskyblue;
    border-radius: 50%;
    overflow: hidden;

/* 背景 */
.clock ul 
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;

.clock ul li 
    height: 400px;
    width: 4px;
    background-color: deepskyblue;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;

.clock ul li:nth-of-type(1) 
    transform: rotate(0deg);

.clock ul li:nth-of-type(2) 
    transform: rotate(30deg);

.clock ul li:nth-of-type(3) 
    transform: rotate(60deg);

.clock ul li:nth-of-type(4) 
    transform: rotate(90deg);

.clock ul li:nth-of-type(5) 
    transform: rotate(120deg);

.clock ul li:nth-of-type(6) 
    transform: rotate(150deg);


.inner-circle-1 
    width: 340px;
    height: 340px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -175px;
    margin-top: -175px;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid deepskyblue;


.inner-circle-2 
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10000;
    margin-left: -15px;
    margin-top: -15px;
    background-color: #f50;
    border-radius: 50%;


.hour ,
.min ,
.second 
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 999;
    /* 旋转中心 */
    transform-origin: center bottom;


.hour 
    width: 14px;
    height: 90px;
    background-color: blue;
    margin-left: -7px;
    top: 110px;
    transform: rotateZ(0deg);
    /* b. 使用动画 */
    animation-name: rotateAimate;
    animation-duration: 43200s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

.min 
    width: 8px;
    height: 130px;
    background-color: green;
    margin-left: -4px;
    top: 70px;
    transform: rotateZ(0deg);
    /* b. 使用动画 */
    animation-name: rotateAimate;
    animation-duration: 3600s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

.second 
    width: 4px;
    height: 200px;
    background-color: red;
    margin-left: -2px;
    top: 0;
    transform: rotateZ(0deg);

    /* b. 使用动画 */
    animation-name: rotateAimate;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;


/* 

 定义动画

*/
@keyframes rotateAimate 
    0% 
        transform: rotateZ(0deg);
    
    100% 
        transform: rotateZ(360deg);

以上是关于html + css3 制作简易时钟的主要内容，如果未能解决你的问题，请参考以下文章