<!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. WPF 引用字体文件资源

    外部字体文件 1.后台代码引用字体 将一个名为"ChineseCharacterSpecialFont.ttf"的ttf文件,放在桌面路径,后台引用方式如下: 1 var ttfF ...

  2. 线上FullGC问题排查实践——手把手教你排查线上问题

    作者:京东科技 韩国凯 一.问题发现与排查 1.1 找到问题原因 问题起因是我们收到了jdos的容器CPU告警,CPU使用率已经达到104% 观察该机器日志发现,此时有很多线程在执行跑批任务.正常来说 ...

  3. Django笔记三十七之多数据库操作(补充版)

    本文首发于公众号:Hunter后端 原文链接:Django笔记三十七之多数据库操作(补充版) 这一篇笔记介绍一下 Django 里使用多数据库操作. 在第二十二篇笔记中只介绍了多数据库的定义.同步命令 ...

  4. elSelect点击空白处无法收起下拉框（失去焦点并隐藏）

    学习记录,为了以后有同样的问题,省得再百度了,方便自己也方便你们element 中多选的select 有个问题,就是点击空白或者关闭弹窗,下拉还会一直展示出来百度了好一会,觉得下面两位大佬说的最合理, ...

  5. IPS 和 IDS

    IPS/IDS 什么是IPS和IDS IDS/IPS是检测和防止对网络服务器进行未授权的访问的系统.有许多产品同时有IDS和IPS的作用,作为加强企业信息安全所必须的系统 什么是IDS(Intrusi ...

  6. 2020-09-13：判断一个正整数是a的b次方，a和b是整数，并且大于等于2，如何求解？

    福哥答案2020-09-13: 首先确定b的范围,b的范围一定在[2,logN]里.然后遍历b,求a的范围,如果范围长度等于0,说明这个正整数是a的b次方.1.遍历b范围.二分法求a,a初始范围是[2 ...

  7. 这可能是最全面的Java学习路线了

    大家好,我是大彬~ 我本科学的不是计算机,大四开始自学Java,并且拿到了几个互联网中大厂的offer.在学习Java这方面还是比较有经验的,下面我来分享下我整理的Java自学路线. 在这里也提醒学弟 ...

  8. MySQL uuid及其相关的一些简单性能测试

    运维同事导入一批大约500万左右的数据,耗时较久.他使用的是纯SQL导入,主键使用的是UUID,因为业务原因没有使用自增ID. 因为是内网,不能远程访问. 通过沟通,大致觉得有两个原因,一是因为UUI ...

  9. Python3.9安装

    一.安装python3.9 链接:https://pan.baidu.com/s/1mDkgKt2KSoMrKVxesb76Pg?pwd=ma4n 提取码:ma4n --来自百度网盘超级会员V4的分享 ...

  10. @SafeVarargs注解的使用

    在声明具有模糊类型(比如:泛型)的可变参数的构造函数或方法时,Java编译器会报unchecked警告.鉴于这些情况,如果程序员断定声明的构造函数和方法的主体不会对其varargs参数执行潜在的不安全 ...