<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            /* 设置表的样式 */

            .clock{

                width: 500px;

                height: 500px;

                /* background-color: #BBFFAA; */

                margin: 0 auto;

                margin-top: 100px;

                /* 圆形 */

                border-radius: 50%;

                /* border:10px solid black; */

                position: relative;

                background-image: url(./img/13/bg.png);

                background-size: cover;

            }

            .clock > div{

                position: absolute;

                top: 0;

                left: 0;

                bottom: 0;

                right: 0;

                margin: auto;

            }

            /* 设置时针 */

            .hour-wrapper{

                height: 70%;

                width: 70%;

                /* background-color: #BBFFAA; */

                animation: run 43200s linear infinite;

            }

            .hour{

                height: 50%;

                width: 6px;

                background-color: #000;

                margin: 0 auto;

            }

            .min-wrapper{

                height: 80%;

                width: 80%;

                animation: run 3600s steps(60) infinite;

            }

            .min{

                height: 50%;

                width: 4px;

                background-color: #000;

                margin: 0 auto;

            }

            .sec-wrapper{

                height: 90%;

                width: 90%;

                /* infinite  持续输出动画 */

                animation: run 60s steps(60) infinite;

            }

            .sec{

                height: 50%;

                width: 2px;

                background-color: #f00;

                margin: 0 auto;

            }

            /* 旋转的关键帧 */

            @keyframes run{

                from{

                    transform: rotateZ(0);

                }

                to{

                    transform: rotateZ(360deg);

                }

            }

        </style>

    </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>

表盘图片链接：

钟表练习 html+css实现的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  3. JS+CSS 钟表

    .<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title& ...

  4. 不用任何图片，只用简单的css写出唯美的钟表，就问你行吗？

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...

  5. html,css,js实现的一个钟表

    效果如图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. CSS命名规范——BEM思想（非常赞的规范）

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  7. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  8. html/京东项目/京东网页高仿/js/jq/css/java web/

    登录部分HTML+CSS: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8& ...

  9. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  10. 太可爱了！CSS3 & SVG 制作的米老鼠钟表

    米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...

随机推荐

  1. Centos7.x 安装配置Web性能压力测试工具Siege

    一.简介 Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力.可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重 ...

  2. CS144 计算机网络 Lab4：TCP Connection

    前言 经过前面几个实验的铺垫,终于到了将他们组合起来的时候了.Lab4 将实现 TCP Connection 功能,内部含有 TCPReceiver 和 TCPSender,可以与 TCP 连接的另一 ...

  3. 金三银四好像消失了，IT行业何时复苏！

    疫情时候不敢离职,以为熬过来疫情了,行情会好一些,可是疫情结束了,反而行情更差了, 这是要哪样 我心中不由一万个 草泥 路过 我心中不惊有了很多疑惑和感叹 接着上一篇 一个28岁程序员入行自述和感受 ...

  4. 音视频八股文（9）-- flv的h264六层结构和aac六层结构

    flv介绍 FLV(Flash Video)是Adobe公司推出的⼀种流媒体格式,由于其封装后的⾳视频⽂件体积⼩.封装简单等特点,⾮常适合于互联⽹上使⽤.⽬前主流的视频⽹站基本都⽀持FLV.采⽤FLV ...

  5. 2021-09-29：不同路径。一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为

    2021-09-29:不同路径.一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 "Start" ).机器人每次只能向下或者向右移动一步.机器人试图达到网格的右 ...

  6. 2014年蓝桥杯C／C++大学B组省赛真题(蚂蚁感冒)

    题目描述: 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒.当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行.这些蚂蚁中,有1只蚂蚁 ...

  7. SpringBoot配置文件加载

    Spring Boot 配置文件加载是通过 Spring Boot 的自动配置机制实现的,它可以根据不同的环境加载不同的配置文件,包括 application.properties.applicati ...

  8. vs2022的一些调试技巧——远程调试&线程检查&性能检查

    visual studio一直都是.net/c#开发人员最受欢迎的编译器,除了强大的代码提示和项目模板,还拥有大量的调试工具,这一期我们介绍下code freeze阶段的一些调试技巧.包括测试环境/生 ...

  9. 【C#/.NET】record介绍

    ​  目录 什么是record? 使用record record解构 record原理 结论 什么是record? record是.NET 5中的一种新特性,可以看作是一种概念上不可变的类.recor ...

  10. Proteus运行故障分析（电源、程序等）

    问题一.Program file is not specified 原因分析:未加载hex文件. 解决方法:双击芯片,点击Program files,找到hex文件添加进来. 问题二.No power ...