<!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. 进程间通信WebSocket 服务端未启动时，客户端重连报错

    当WebSocket服务端未启动时,我们在客户端申请连接,会报 System.Net.Sockets.SocketException 异常. 当然,我们调试时异常设置默认是不勾选这个的.所以不影响正常 ...

  2. C# 系统菜单弹出框方向

    右键菜单,tootip等弹出时,弹出的位置经常在左侧,使用体验不好. 弹出方向有左对齐和右对齐 SystemParameters.MenuDropAlignment 当右对齐时,值为false 可以在 ...

  3. Mastering Regular Expressions(精通正则表达式) 阅读笔记：第一章，概念

    Real Scenario(现实场景) Here's the scenario: you're given the job of checking the pages on a web server ...

  4. 【Docker】安装及部署

    一.Ubuntu使用apt安装Docker 官方安装文档:https://docs.docker.com/engine/install/ubuntu/ 1.准备安装环境 [root@Docker-Ub ...

  5. 2022-04-19：A*算法, 过程和Dijskra高度相处, 有到终点的预估函数, 只要预估值＜=客观上最优距离，就是对的。 预估函数是一种吸引力： 1）合适的吸引力可以提升算法的速度； 2）吸引

    2022-04-19:A*算法, 过程和Dijskra高度相处, 有到终点的预估函数, 只要预估值<=客观上最优距离,就是对的. 预估函数是一种吸引力: 1)合适的吸引力可以提升算法的速度; 2 ...

  6. .join()字符串操作函数

    join函数是一个字符串操作函数 str.join(item)str表示字符串(字符),item表示一个成员,注意括号里必须只能有一个成员,比如','.join('a','b')这种写法是行不通的 举 ...

  7. Error in nextTick: "TypeError: Right-hand side of 'instanceof' is not an object"

    发生这种情况,直接去查看 props 对象是否  类型正确 props 有 大概两种 写法吧, 一种就是对象形 ,一种是数组形 // 对象形props: { show: { type: Boolean ...

  8. 分布式协调服务之Zookeeper

    1. 认识Zookeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用 ...

  9. C#中BitConverter.ToUInt16、BitConverter.ToUInt32原理与用法详解

    一.基础知识 a.1字节=8位(1Byte=8bit)   二进制表示:11111111   十进制表示:255 计算机内部约定用多少字节来规范数值,比如红绿蓝三色在计算机中只分配了一个字节,一个字节 ...

  10. ubuntu为navicat创建快捷方式

    一.前言 最近在ubuntu上安装了navicat,但是发现不能将其固定在启动栏阿!!!不能每次都用terminal运行吧!于是在上网查,有一说一,网上很多文章写的方法都不能实现(不排除是ubuntu ...