CSS时钟案例

最新推荐文章于 2024-05-30 07:58:39 发布
最新推荐文章于 2024-05-30 07:58:39 发布
阅读量1.8k 收藏 15
点赞数 7
分类专栏： css 文章标签： css 时钟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaomohhh/article/details/99494216
版权

效果如下图
在这里插入图片描述
下面是html代码

<div class="box">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="roundness circle"></div>
    <div class="needle hour"></div>
    <div class="needle minute"></div>
    <div class="needle second"></div>
    <div class="roundness cir"></div>
</div>

首先是外圆,给类box添加样式

.box {
    margin: 100px auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px solid #cccccc;
    position: relative;
}

在这里插入图片描述
然后是画上刻度,给类line，line1 — line6添加样式

.box > .line {
    height: 300px;
    width: 10px;
    position: absolute;
    background-color: #cccccc;
    left: 50%;
    transform: translate(-50%, 0);
}
.box > .line2 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(30deg);
}
.box > .line3 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(60deg);
}
.box > .line4 {
    transform: translate(-50%, 0) rotateZ(90deg);
}
.box > .line5 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(120deg);
}
.box > .line6 {
    width: 7px;
    transform: translate(-50%, 0) rotateZ(150deg);
}

在这里插入图片描述
然后加一个圆,把中间的线遮住,给类roundness(公共样式—最后有个小圆会用到) circle添加样式

.roundness {
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.circle {
    width: 270px;
    height: 270px;
    background-color: #fff;
}

在这里插入图片描述
下面是给时、分、秒针，给类needle(公共样式) hour minute second添加样式，并添加动画效果

.needle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
}
.hour {
    width: 10px;
    height: 70px;
    background-color: limegreen;
    border-radius: 5px 5px;
    /*设置旋转轴心*/
    transform-origin: center bottom;
    /*添加动画*/
    animation: clockanimation 43200s linear infinite;
}
.minute {
    width: 7px;
    height: 90px;
    background-color: yellow;
    border-radius: 3.5px 3.5px;
    /*设置旋转轴心*/
    transform-origin: center bottom;
    /*添加动画*/
    animation: clockanimation 3600s linear infinite;
}
.second {
    width: 4px;
    height: 110px;
    background-color: red;
    border-radius: 2px 2px;
    /*设置旋转轴心*/
    transform-origin: center bottom;
    /*添加动画*/
    animation: clockanimation 60s linear infinite ;
}
@keyframes clockanimation {
    0% {
        transform: translate(-50%, -100%);
    }
    100% {
        transform: translate(-50%, -100%) rotate(360deg);
    }
}

在这里插入图片描述
最后在中心加一个小圆

.cir {
    width: 20px;
    height: 20px;
    background-color: #ccc;
}

在这里插入图片描述

下面是完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid #cccccc;
            position: relative;
        }
        .box>.line {
            height: 300px;
            width: 10px;
            position: absolute;
            background-color: #cccccc;
            left: 50%;
            transform: translate(-50%, 0);
        }
        .box>.line2 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(30deg);
        }
        .box>.line3 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(60deg);
        }
        .box>.line4 {
            transform: translate(-50%, 0) rotateZ(90deg);
        }
        .box>.line5 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(120deg);
        }
        .box>.line6 {
            width: 7px;
            transform: translate(-50%, 0) rotateZ(150deg);
        }
        .roundness {
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .circle {
            width: 270px;
            height: 270px;
            background-color: #fff;
        }
        .needle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%);
        }
        .hour {
            width: 10px;
            height: 70px;
            background-color: limegreen;
            border-radius: 5px 5px;
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            animation: clockanimation 43200s linear infinite;
        }
        .minute {
            width: 7px;
            height: 90px;
            background-color: yellow;
            border-radius: 3.5px 3.5px;
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            animation: clockanimation 3600s linear infinite;
        }
        .second {
            width: 4px;
            height: 110px;
            background-color: red;
            border-radius: 2px 2px;
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            animation: clockanimation 60s linear infinite;
        }
        @keyframes clockanimation {
            0% {
                transform: translate(-50%, -100%);
            }
            100% {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
        .cir {
            width: 20px;
            height: 20px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <div class="roundness circle"></div>
        <div class="needle hour"></div>
        <div class="needle minute"></div>
        <div class="needle second"></div>
        <div class="roundness cir"></div>
    </div>
</body>
</html>
xiaomohhh
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 绘制一个时钟
老司机的后备箱
05-24 2477
练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？ 你也可以访问这个 CSS clock或者以下代码片段查看实际效果 CSS clock CSS 绘制这样一个布局有几个难点： 环形排列的刻度 环形分布的数字 自动运行的指针 下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧 一、环形排列的刻度 提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器 <clock></clock> 加上一点锥形渐变 clock{
纯CSS动态时钟
qq_43465434的博客
03-04 320
话不多说，先上代码 HTML： <div class="clock"> <img src="img/clock.jpg" alt=""> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="circle"></div> &
CSS神器：使用纯CSS制作交互性时钟
canshanyin的博客
06-04 952
CSS是一个非常强大的工具，通过使用CSS3的属性和动画来创建出令人惊叹的交互式视觉效果。学习CSS的过程中，找到有趣的，实用的示例，将会大大有利于你的学习。在本文中，我们将讨论如何使用CSS创建一个有趣且实用的示例：一个交互式的时钟。如果你希望更深入地了解CSS的知识，请阅读我们的其他CSS教程和学习资料，它们将帮助你进一步掌握各种CSS属性和技巧，以及如何将它们应用到你的网页设计中。在这个案例中，我们选择基本的HTML结构来构建我们的时钟。我们使用CSS3提供的旋转、变换和动画属性来制作我们的时钟。
纯 js + css 实现非常漂亮的网页电子时钟
最新发布
beyond520lin的博客
05-30 168
下载源码
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1378
Document
【CSS】纯CSS时钟居然会动
we
05-31 1139
纯CSS，不用图片，不用JS，绘制一个走动的时钟。 秒针不用 JS 的定时器，纯css怎么可能呢， 不可能，绝对不可能！！ 先看下效果： （录制的原因，秒针走过有阴影，实际是没有的） 纯 CSS 能实现一个动态的时钟，真的是颠覆了我的认知。 那教你如何用纯CSS做一动态的时钟， （完整代码在最后） CSS 绘制这样一个布局有几个难点： 环形排列的刻度 环形分布的数字 自动运行的指针 下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧 一、环形排列的刻度.
如何用CSS做倒计时/圆形进度条效果
qq_26780317的博客
04-23 6134
前言：有时，我们会见一些圆形的进度条，随着进度条的推进，进行倒计时的变化。 若是只实现一个圆环的话，只用border和border-radius就能画出来。 但是这样的圆环不能动，产生进度条效果的重要因素就是得从0 开始变化，而不是一个完整的圆环在旋转。所以，实现的思路如下： 1.把整个圆环分成左右两部分； 2.左...
CSS：倒计时案例
weixin_52589346的博客
05-19 752
倒计时代码案例 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
CSS3时钟案例.zip
07-02
在本案例中，"CSS3时钟案例.zip"是一个压缩包，其中包含了使用CSS3技术构建的时钟示例。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它引入了许多新的特性和功能，极大地扩展了网页设计的可能性。这个案例...
node.js时钟案例
04-13
总结来说，"node.js时钟案例"是一个综合性的项目，涉及到Node.js服务器端编程、HTML和CSS的处理、JavaScript的执行以及前端交互设计。通过学习和实践这个案例，开发者可以加深对Node.js、前端技术和动态Web页面构建...
CSS3实现指针时钟走动特效
09-13
总的来说，CSS3实现的指针时钟走动特效是结合了CSS3动画、HTML布局和JavaScript时间处理的一个综合案例，它展示了CSS3的强大能力和网页设计的创新潜力。通过理解和实践这一技术，开发者不仅可以提升自己的技能，还能...
基于 css 版时钟
09-01
利用css 做的时钟
CSS3时钟圆形立体倒计时特效代码
03-20
【CSS3时钟圆形立体倒计时特效代码】是一种利用CSS3的强大功能来实现的创新设计，它将传统的倒计时元素与立体效果相结合，创造出一个具有视觉吸引力的时钟界面。这种特效常用于网站的活动倒计时、重要日期提醒等场景...
Css3+Js制作漂亮时钟(附源码)
09-25
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个美观的时钟。这个时钟设计兼容多种浏览器，包括IE9、Google Chrome、Firefox和Safari。通过学习这个案例，你可以了解如何结合这两门技术来创建动态且...
使用css制作动态时钟详细教程
panliyou的博客
02-12 5725
使用css制作动态时钟 完成效果： 步骤一： 创建一个宽高为300px圆形时钟的外表盘，边框加上阴影更好看一点，页面背景色为黑色 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
简单的运用CSS写一个时钟
qq_40904724的博客
06-16 733
简单的运用css+html写一个时钟 Document
纯css3制作简易钟表时钟
qq_44771388的博客
12-21 1138
使用css3制作简易钟表 效果 html代码 <div class="clock" > <!-- 指針 --> <div class="hour"></div> <div class="point"></div> <div class="seconds"></div> <!-- 黑点 --> <d
css制作炫酷的罗盘时钟特效（附代码）
z1093541823的博客
04-19 4057
炫酷的罗盘时钟特效； 可以直接使用；
css时钟立体数字标识
11-09
根据提供的引用内容，我们可以看到这是一个CSS时钟的样式代码，其中包括了时针、分针和秒针的样式。并没有提到立体数字标识。如果您需要实现CSS时钟立体数字标识，可以参考以下步骤： 1. 首先，您需要在HTML中创建一个容器，用于放置时钟和数字标识。 2. 然后，您可以使用CSS样式来创建数字标识。可以使用伪元素:before和:after来创建数字的立体效果。 3. 接下来，您需要使用JavaScript来获取当前时间，并将时、分、秒的值分别赋值给时针、分针和秒针的样式中的transform属性，以实现时钟的动态效果。 以下是一个简单的CSS时钟立体数字标识的示例代码： ```html <div class="clock"> <div class="digits"> <span class="digit">1</span> <span class="digit">2</span> <span class="digit">3</span> <span class="digit">4</span> <span class="digit">5</span> <span class="digit">6</span> <span class="digit">7</span> <span class="digit">8</span> <span class="digit">9</span> <span class="digit">10</span> <span class="digit">11</span> <span class="digit">12</span> </div> <div class="hands"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> </div> </div> <style> .clock { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .digits { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: bold; color: #000; } .digit { position: absolute; width: 20px; height: 20px; text-align: center; line-height: 20px; } .digit:nth-child(1) { top: 10px; left: 50%; transform: translateX(-50%); } .digit:nth-child(2) { top: 20px; left: calc(50% + 40px); } .digit:nth-child(3) { top: 40px; left: calc(50% + 70px); } .digit:nth-child(4) { top: calc(50% - 10px); left: calc(50% + 80px); } .digit:nth-child(5) { top: calc(50% + 60px); left: calc(50% + 70px); } .digit:nth-child(6) { bottom: 10px; left: 50%; transform: translateX(-50%); } .digit:nth-child(7) { top: calc(50% + 60px); left: calc(50% - 70px); } .digit:nth-child(8) { top: calc(50% - 10px); left: calc(50% - 80px); } .digit:nth-child(9) { top: 40px; left: calc(50% - 70px); } .digit:nth-child(10) { top: 20px; left: calc(50% - 40px); } .digit:nth-child(11) { top: 10px; left: 50%; transform: translateX(-50%); } .digit:nth-child(12) { top: 10px; left: 50%; transform: translateX(-50%); } .hands { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hour-hand { position: absolute; top: 50%; left: 50%; width: 6px; height: 50px; margin-top: -25px; margin-left: -3px; background-color: #000; border-radius: 6px 6px 0 0; transform-origin: bottom center; } .minute-hand { position: absolute; top: 50%; left: 50%; width: 4px; height: 70px; margin-top: -35px; margin-left: -2px; background-color: #000; border-radius: 4px 4px 0 0; transform-origin: bottom center; } .second-hand { position: absolute; top: 50%; left: 50%; width: 2px; height: 80px; margin-top: -40px; margin-left: -1px; background-color: #f00; border-radius: 2px 2px 0 0; transform-origin: bottom center; } .second-hand:before { content: ""; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: #f00; } .second-hand:after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 40px; margin-top: -20px; margin-left: -2px; background-color: #f00; border-radius: 4px 4px 0 0; transform-origin: bottom center; } </style> <script> function updateClock() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var hourHand = document.querySelector(".hour-hand"); var minuteHand = document.querySelector(".minute-hand"); var secondHand = document.querySelector(".second-hand"); hourHand.style.transform = "rotate(" + (hours * 30 + minutes / 2) + "deg)"; minuteHand.style.transform = "rotate(" + (minutes * 6) + "deg)"; secondHand.style.transform = "rotate(" + (seconds * 6) + "deg)"; setTimeout(updateClock, 1000); } updateClock(); </script> --相关问题--:

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值