<!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. 飞行时间技术TOF

    文章目录 飞行时间技术TOF 一. 光速的测定 二. 各种TOF技术 直接脉冲TOF 脉冲间接TOF 连续波调制TOF(Continous Wave TOF) 三. TOF技术的应用 飞行时间技术TO ...

  2. 希望所有计算机学生能看到这篇c语言教程

    大部分程序员走入编程世界第一个学习的语言就是C语言. 作为一门古老的编程语言,c语言拥有48年的发展历程. 为什么要学习 C语言? C语言是学习计算机程序设计语言的入门语言.最全面的编程面试网站 C语 ...

  3. CF1808E Minibuses on Venus 智商毁灭记

    都要考省选了大脑还在这里下线 场上看到这道题很快推出了 \(k\) 为奇数的搞法,发现可以直接做到 \(O(k\log n)\),一阵狂喜然后肝起了 E3,结果 E1 都没过. 事实上这道题可以直接做 ...

  4. Mysql列转行, group_concat的使用

    开始业务的查询的时候碰到一个sql的查询语句问题,主要是 group_concat 之前没用过,现在记录一下怎么用 group_concat 用法, 可以将相同的行组合起来 group_concat( ...

  5. 2023-02-14：魔物了占领若干据点，这些据点被若干条道路相连接， roads[i] = [x, y] 表示编号 x、y 的两个据点通过一条道路连接。 现在勇者要将按照以下原则将这些据点逐一夺回：

    2023-02-14:魔物了占领若干据点,这些据点被若干条道路相连接, roads[i] = [x, y] 表示编号 x.y 的两个据点通过一条道路连接. 现在勇者要将按照以下原则将这些据点逐一夺回: ...

  6. 在程序里如何停止整个python项目的运行

    我们的项目无可避免的会遇到一些场景,当出现某个故障或者异常,必须停止整个项目的运行,这时只需要在抛出的异常里执行以下即可: os._exit(0)

  7. 2013年蓝桥杯C／C++大学A组省赛真题（高斯的日记）

    题目描述: 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第 ...

  8. HTML入门笔记1

    一.HTML是谁发明的? 1990年Tim Berners Lee发明了www(world wide web万维网),为了方面人们于阅读网页,与此同时自己又发明了HTML.HTTP.URL:用自己写的 ...

  9. es mysql 适用场景对比

    es mysql 适用场景对比 问题一 全文检索毫无疑问直接上es,那么除了这种场景,什么时候该选es?为啥mysql不行? 对枚举字段的搜索 mysql创建索引的原则是对于那些区别度高字段建立索引, ...

  10. Java的标识符、关键字、 常量、变量、数据类型、 数据类型转换、字符ASCII码表（基础语法的学习）

    一.Java的关键字和标识符 关键字 1.定义: 在Java程序中,已经定义好的被预先使用的一些特殊的单词称为关键字,一共有50个关键字(48+2个保留字),关键字都是小写的英文单词 2.关键字的分类 ...