使用css制作动态时钟详细教程

最新推荐文章于 2022-08-28 16:06:00 发布
置顶 最新推荐文章于 2022-08-28 16:06:00 发布
阅读量5.7k 收藏 26
点赞数 5
分类专栏： 炫酷特效 html和css的那些事 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39411655/article/details/113795381
版权

使用css制作动态时钟详细教程

完成效果：

在这里插入图片描述

步骤一：

创建一个宽高为300px圆形时钟的外表盘，边框加上阴影更好看一点，页面背景色为黑色

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #000;
        }

        .box {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 4px solid skyblue;
            border-radius: 50%;
            /* 边框阴影可以在浏览器阴影编辑器里面调 */
            box-shadow: 0px 0px 16px 5px skyblue;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

步骤二：

给时钟加上刻度线，先创建好6根线 定位在中心位置，然后通过2D旋转，分别旋转到对应的位置即可

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 4px solid skyblue;
            box-shadow: 0px 0px 16px 5px skyblue;
            border-radius: 50%;
        }

        /* 先创建好几根线 定位在中心位置 然后分别旋转 */
        [class^="line"] {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: tomato;
            top: 50%;
            transform: translateY(-50%);
        }

        .line2 {
            transform: rotate(30deg);
        }

        .line3 {
            transform: rotate(60deg);
        }

        .line4 {
            transform: rotate(90deg);
        }

        .line5 {
            transform: rotate(120deg);
        }

        .line6 {
            transform: rotate(150deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
    </div>
</body>

</html>

步骤三：

给一个遮罩层覆盖多余的刻度线，背景色要与页面颜色一致

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 4px solid skyblue;
            box-shadow: 0px 0px 16px 5px skyblue;
            border-radius: 50%;
        }

        /* 先创建好几根线 定位在中心位置 然后分别旋转 */
        [class^="line"] {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: tomato;
            top: 50%;
            transform: translateY(-50%);
        }

        .line2 {
            transform: rotate(30deg);
        }

        .line3 {
            transform: rotate(60deg);
        }

        .line4 {
            transform: rotate(90deg);
        }

        .line5 {
            transform: rotate(120deg);
        }

        .line6 {
            transform: rotate(150deg);
        }

        /* 创建一个黑色遮罩层 定位在中心 压住中心的线模拟形成指针效果 */
        .mask {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            background-color: #000;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="mask"></div>
    </div>
</body>

</html>

步骤四：

给时钟加上时，分，秒指针，布局基本上都是通过定位实现元素在对应的位置，层级需要注意，刻度线的层级最低，其次到覆盖层，再到时分秒指针，为了让指针更好看用了渐变色

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 4px solid skyblue;
            box-shadow: 0px 0px 16px 5px skyblue;
            border-radius: 50%;
        }

        /* 先创建好几根线 定位在中心位置 然后分别旋转 */
        [class^="line"] {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: tomato;
            top: 50%;
            transform: translateY(-50%);
        }

        .line2 {
            transform: rotate(30deg);
        }

        .line3 {
            transform: rotate(60deg);
        }

        .line4 {
            transform: rotate(90deg);
        }

        .line5 {
            transform: rotate(120deg);
        }

        .line6 {
            transform: rotate(150deg);
        }

        /* 创建一个白色遮罩层 定位在中心 压住中心的线模拟形成指针效果 */
        .mask {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            background-color: #000;
            border-radius: 50%;
        }

        /* 创建时针 */
        .hour {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 4px;
            height: 25%;
            background: linear-gradient(to top, #f1536a, #18bee8);
        }

        /* 创建分针 */
        .min {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 4px;
            height: 35%;
            background: linear-gradient(to top, #7180f7, #fa5e82);
        }

        /* 创建秒针 */
        .sec {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 2px;
            height: 40%;
            background: linear-gradient(to top, #32bd91, #8163c3);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="mask"></div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
    </div>
</body>

</html>

步骤五：

给时钟加上一个白色小圆点，最终时钟的静态页面完成。

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 4px solid skyblue;
            box-shadow: 0px 0px 16px 5px skyblue;
            border-radius: 50%;
        }

        /* 先创建好几根线 定位在中心位置 然后分别旋转 */
        [class^="line"] {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: tomato;
            top: 50%;
            transform: translateY(-50%);
        }

        .line2 {
            transform: rotate(30deg);
        }

        .line3 {
            transform: rotate(60deg);
        }

        .line4 {
            transform: rotate(90deg);
        }

        .line5 {
            transform: rotate(120deg);
        }

        .line6 {
            transform: rotate(150deg);
        }

        /* 创建一个黑色遮罩层 定位在中心 压住中心的线模拟形成指针效果 */
        .mask {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            background-color: #000;
            border-radius: 50%;
        }

        /* 创建白色小圆点压住各个指针 层级调成最高 */
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            background-color: #fff;
            border-radius: 50%;
            z-index: 6;
        }

        /* 创建时针 */

        .hour {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 4px;
            height: 25%;
            background: linear-gradient(to top, #f1536a, #18bee8);
        }

        /* 创建分针 */

        .min {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 4px;
            height: 35%;
            background: linear-gradient(to top, #7180f7, #fa5e82);
        }

        /* 创建秒针 */
        .sec {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 2px;
            height: 40%;
            background: linear-gradient(to top, #32bd91, #8163c3);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="mask"></div>
        <div class="center"></div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
    </div>
</body>

</html>

最后：给时分秒指针加上动画即可

原理：时分秒指针都为旋转360度，只是旋转的时间不一样，秒针60s，分针3600s，时针43200s,2D旋转默认是围绕着中心旋转的，我们需要改变它的旋转中心围绕着底部旋转即可 transform-origin: bottom，秒针每秒的移动都会有一个停顿的动作，这里采用逐帧播放即可steps(60)

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 4px solid skyblue;
            box-shadow: 0px 0px 16px 5px skyblue;
            border-radius: 50%;
        }

        /* 先创建好几根线 定位在中心位置 然后分别旋转 */
        [class^="line"] {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: tomato;
            top: 50%;
            transform: translateY(-50%);
        }

        .line2 {
            transform: rotate(30deg);
        }

        .line3 {
            transform: rotate(60deg);
        }

        .line4 {
            transform: rotate(90deg);
        }

        .line5 {
            transform: rotate(120deg);
        }

        .line6 {
            transform: rotate(150deg);
        }

        /* 创建一个黑色遮罩层 定位在中心 压住中心的线模拟形成指针效果 */
        .mask {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            background-color: #000;
            border-radius: 50%;
        }

        /* 创建白色小圆点压住各个指针 层级调成最高 */
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            background-color: #fff;
            border-radius: 50%;
            z-index: 6;
        }

        /* 创建时针 */

        .hour {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 4px;
            height: 25%;
            background: linear-gradient(to top, #f1536a, #18bee8);
            transform-origin: bottom;
            /* 时针一周是12小时 12 * 60 * 60 */
            animation: rotate 43200s linear infinite;
        }

        /* 创建分针 */

        .min {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 4px;
            height: 35%;
            background: linear-gradient(to top, #7180f7, #fa5e82);
            transform-origin: bottom;
            /* 分针针一圈转一个小时 一小时是60*60s */
            animation: rotate 3600s linear infinite;
        }

        /* 创建秒针 */

        .sec {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            width: 2px;
            height: 40%;
            background: linear-gradient(to top, #32bd91, #8163c3);
            transform-origin: bottom;
            /* 秒针一圈转60s */
            animation: rotate 60s steps(60) infinite;
        }

        /* 创建动画 一个动画足以,所有指针都是旋转一周,变化的只是旋转一周的时间 */
        @keyframes rotate {
            to {
                /* 此处需要注意，如果直接写旋转，那么绝对定位配合transform: translate(-50%,-50%)的这个属性会被旋转层叠掉，所以必须再利用transform的连写属性重新书写。 */
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="mask"></div>
        <div class="center"></div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
    </div>
</body>

</html>
panliyou
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
CSS 绘制一个时钟
老司机的后备箱
05-24 2477
练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？ 你也可以访问这个 CSS clock或者以下代码片段查看实际效果 CSS clock CSS 绘制这样一个布局有几个难点： 环形排列的刻度 环形分布的数字 自动运行的指针 下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧 一、环形排列的刻度 提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器 <clock></clock> 加上一点锥形渐变 clock{
纯css3实现动态时钟效果.zip
07-04
纯css3实现动态时钟效果适用于钟表网站
CSS3制作漂亮时钟显示效果特效代码
03-20
HTML5超酷秒表动画 可暂停和重置秒表
weixin_34208185的博客
10-02 177
关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。 在线演示 下面来分析一下实现的源代码，主要由HTML和CSS代码组成，CSS相对比较复杂，因为涉及到动画。 HTML代码： &lt;input id...
html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码
weixin_34907135的博客
05-31 656
特效描述：html5 css3 带日期 圆形数字 电子时钟代码。HTML5+CSS3圆形数字电子时钟。代码结构1. 引入JS2. HTML代码654321121110987$(function(){var clock = document.getElementById("clock");function initNumXY(){// 1、12个数字的位置设置var radius = 160;//大...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1378
Document
干货分享 9款精挑细选的HTML5应用
weixin_34061042的博客
04-09 464
对于前端开发者来说，分享一些优秀的HTML5应用可以直接拿来用，更重要的是可以激发创作的灵感。今天我们要分享9款精挑细选的HTML5应用，个个都是干货。 1、HTML5/CSS3滑块动画菜单 图标动画很酷 CSS3菜单我们之前已经分享很多了，有3D菜单、下拉菜单、Tab菜单等，具体大家可以移步至CSS3菜单栏目下查找。今天我们要分享的这款HTML5/CSS3滑块动画菜单非常酷，鼠标滑过菜单...
CSS动画篇之炫酷时钟之时钟墙
南城
05-07 584
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 前言 看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太复杂了，也没有和此设计理念一样，简洁且优美。 实现过程 HTML 当你仔细看这个动图的时候可以看出我们可以
具有纯CSS3的模拟时钟（无JavaScript）
cuken7684698822的博客
08-02 423
CSS3 clock. Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have th...
使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程).zip
06-17
使用 HTML、CSS 和 JavaScript 编程代码制作模拟时钟，这是一个非常简单很基础的设计，你可以在这里延伸扩展。这里有时针、分针和秒针，可以查看时间。时钟脉冲中有1 到 12 的数字。时间取决于您设备的时间，即时间...
CSS3实现漂亮时钟代码.zip
07-03
这是一款漂亮的时钟效果，使用纯css3实现
《如何使用js实现电子时钟功能》三个效果完整代码
03-28
本文件属于文章《如何使用js实现电子时钟功能》的完整代码，在读完原创文章之后可以下载查看代码。代码中包括基本，图片和滚动动画的三种时钟效果，html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发...
jQuery制作3D冰块立方时钟.rar
最新发布
10-01
本教程将深入探讨如何利用jQuery和CSS技术创建一个引人注目的3D冰块立方体时钟效果。这个特效不仅实用，而且具有很高的可定制性，允许开发者进行二次修改，以适应各种网页设计需求。 首先，我们来看jQuery在其中的...
css3动画原理制做的指针时钟特效代码
03-20
本教程将详细讲解如何利用CSS3动画原理制作一个指针时钟特效。 首先，让我们了解CSS3动画的基础。CSS3动画通过关键帧（Keyframes）来定义元素在不同时间点的状态。`@keyframes`规则用于创建动画，其中定义了动画从...
CSS时钟案例
xiaomohhh的博客
08-14 1862
效果如果图下 下面是html代码 <div class="box"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class...
html怎么在一个圆形时钟,用html+css+javascript制作圆形时钟
weixin_27890975的博客
07-02 783
制作好的效果如下： 表盘、刻度和数字全都是用html+css完成的。html+css代码如下：圆形时钟#div1{width: 500px;height: 500px;border:1px solid black;border-radius: 50%;margin: auto;position: relative;}.clockPanel{width: 500px;border-top: 1px ...
3、CSS动态时钟
不迁怒，不贰过。小知识，大智慧。
08-28 1011
- 创建时针 -->-- 创建秒 -->-- 创建秒 -->/* 设置表的样式 */-- 创建表的容器 -->/* 设置关键帧 *//* 设置时针 *//* 设置分针 *//* 设置秒针 */
使用css制作一套按钮
04-20
很高兴回答你的问题！对于使用 CSS 制作一套按钮，我可以给出一些建议。 1. 首先，确定你想要的按钮样式，比如是圆角矩形、圆形或其他形状，是实心还是空心等等。可以先画一张草图来帮助你更好地理解你需要的样式。 2. 根据草图，编写 CSS 代码来实现样式。可以使用 box-shadow、border-radius、background-color 等属性来实现按钮的样式。还可以使用 hover 和 active 伪类来实现鼠标悬停和按钮按下时的特效。 3. 同时，也可以使用 CSS 3 的特性来增强按钮的样式，比如过渡效果、动画效果等等，来让你的按钮更加美观。 综上所述，制作一套漂亮的按钮需要一定的 CSS 知识和技巧，但只要认真学习并多加练习，制作出一套令人满意的按钮并不难。希望我的回答对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值