您现在的位置是:首页 > 正文

简单的时钟html

2024-04-01 04:16:01阅读 1

目录

全部代码

html部分

表盘

 刻度css部分

时针

分针

动画

 中间的点


 

        首先我将一个时钟分成了刻度(有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;

}

 

网站文章

  • [解决方案]springboot怎么接受encode后的参数(参数通过&=拼接)

    [解决方案]springboot怎么接受encode后的参数(参数通过&=拼接)

    springboot怎么接受encode后的参数(参数通过&=拼接)

    2024-04-01 04:15:55
  • TCP协议面试常问知识点,倾心总结

    TCP协议面试常问知识点,倾心总结

    TCP协议TCP协议段格式确认应答(ACK)机制超时重传机制连接管理机制理解TIME_WAIT状态理解CLOSE_WAIT状态滑动窗口拥塞窗口延时应答捎带应答面向字节流粘包问题TCP协议段格式首先一点...

    2024-04-01 04:15:09
  • docker(七)容器监控(CAdvisor+InfluxDB+Granfana)

    docker(七)容器监控(CAdvisor+InfluxDB+Granfana)

    CAdvisor+InfluxDB+Granfana进行容器监控

    2024-04-01 04:15:02
  • 洞道干燥及计算机控制实验报告,化工原理洞道干燥实验报告模版.doc

    化工原理洞道干燥实验报告模版洞道干燥附件 1. 调试实验的数据见表2, 表中符号的意义如下: S─干燥面积, [m2] GC─绝干物料量, [g] R─空气流量计的读数, [kPa] To─干燥器进口...

    2024-04-01 04:14:24
  • iSlide系列教程视频简介——PPT的简化神器

    iSlide系列教程短视频完整版【-1】PPT基础操作-迅速告别PPT小白身份:http://t.cn/RdO3zEL【00】全局化设计思维与PPT主题:http://t.cn/RdO3zEA01.PPT智能模板工具iSlide插件安装教程:http://t.cn/RdO3zRd02.主题库+图示库,给你开挂的PPT设计体验:http://t.cn/RdO3zEU03.色彩库带你玩转P...

    2024-04-01 04:14:16
  • 优质壁纸网站 awesome wallpaper sites

    wallhaven

    2024-04-01 04:14:08
  • mysql char 空白_MySQL中CHAR and VARCHAR

    MySQL版本:8.0版本CHAR和VARCHAR类型相似,但在存储、检索方式、最大长度和是否保留末尾空格四个方面存在差异。长度:CHAR(0-255)类型为CHAR的列的长度是固定的,可以在创建表时...

    2024-04-01 04:13:30
  • MyBatis原理分析手写持久层框架

    MyBatis原理分析手写持久层框架

    目录1 JDBC操作数据库问题分析2 JDBC问题分析和解决思路3 自定义持久层框架_思路分析3.1 使用JDBC和使用持久层框架区别3.2 核心接口/类重点说明3.3 项目使用端3.4 自定义框架本身3.5 最终手写的持久层框架结构参考4 自定义持久层框架_编码5 自定义持久层框架优化

    2024-04-01 04:13:22
  • 软件测试期末考试复习--性能测试大题详解

    软件测试期末考试复习--性能测试大题详解

    我有好多题,刷刷刷、哈哈哈。。。。。。。 第一题 【说明】 性能测试在系统质量保证中起重要作用。某项目组对一个电子政务平台系统执行了负载压力性能测试,重点评估其效率质量特性中的时间特性和资源利用性两个质量子特性。性能需求可以概括为:业务成功率达到 100%;响应时间在 8 秒之内;内存页面交换速率低于80pagein/s;服务器资源利用合理。测试环境逻辑部署图如下图。 【问...

    2024-04-01 04:13:14
  • 【必看】机器学习人才必备 —— TensorFlow 开发者证书

    【必看】机器学习人才必备 —— TensorFlow 开发者证书

    在当今的 AI 世界中,越来越多的公司正在寻求与聘请机器学习方面的人才,与此同时,越来越多的学生和开发者也正在寻求获取和展示 ML 知识的渠道。 除了在线课程和学习资源之外,我们希望帮助开发者展示自身...

    2024-04-01 04:13:07