首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

具有纯CSS3的模拟时钟（无JavaScript）

作者：mobiledu2502870073 | 来源：互联网 | 2023-08-06 09:14
CSS3clock.Today–anotheronegreatarticle–wearegoingtocreatepureCSS3AnalogClockwithoutanyjava

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 three arrows on the face – hour, minute and second. Each of them – a narrow rectangle rotated to the desired angle. How it works in result? – Easy, I am using necessary delays for all these arrows. How exactly – read on.

CSS3时钟。 今天(另一篇很棒的文章)&＃xff0c;我们将创建不带任何Javascript的纯CSS3模拟时钟(我们将使用CSS3的强大功能和动画来构建它)。 我们的钟面上有三个箭头–小时&＃xff0c;分钟和秒。 他们每个人-旋转到所需角度的狭窄矩形。 结果如何运作&＃xff1f; –很简单&＃xff0c;我为所有这些箭头使用了必要的延迟。 究竟如何–继续阅读。

For our clock – I have prepared -webkit and -moz styles. So please keep in mind – that clock will work only in Firefox, and Webkit-based browsers (Chrome and Safari). If you like – you always can expand necessary styles (for arrows) for IE and Opera browsers (by adding same stylesheets with -ms and -o prefixes).

对于我们的时钟&＃xff0c;我准备了-webkit和-moz样式。 因此请记住-该时钟仅在Firefox和基于Webkit的浏览器(Chrome和Safari)中有效。 如果愿意&＃xff0c;您可以始终为IE和Opera浏览器扩展必要的样式(箭头)(通过添加带有-ms和-o前缀的相同样式表)。

Here are samples and downloadable package:

以下是示例和可下载的软件包&＃xff1a;

现场演示
打包下载

Ok, download the example files and lets start coding !

好的&＃xff0c;下载示例文件并开始编码&＃xff01;

步骤1. HTML标记 (Step 1. HTML markup)

The mark-up for our clock is not very simple – it contain lot of DIV elements. Each of them – our arrows. Here it is.

我们时钟的标记不是很简单-它包含许多DIV元素。 每个人-我们的箭。 这里是。

index.html (index.html)



Analog Clock with Pure CSS3 (without Javascript)

Back to original tutorial on Script Tutorials




Analog Clock with Pure CSS3 (without Javascript)

Back to original tutorial on Script Tutorials



步骤2. CSS (Step 2. CSS)

Now – CSS styles. As usual, we won’t publish main page layout styles (layout.css). But, there are stylesheets for our clock:

现在-CSS样式。 和往常一样&＃xff0c;我们不会发布主页布局样式(layout.css)。 但是&＃xff0c;我们的时钟有一些样式表&＃xff1a;

css / clocks.css (css/clocks.css)


#clock {background: #fff url(cface.png) 0 0 no-repeat;height: 500px;margin: 0 auto;overflow: hidden;position: relative;width: 500px;-webkit-border-radius: 250px;-moz-border-radius: 250px;-ms-border-radius: 250px;-o-border-radius: 250px;border-radius: 250px;
}
/* seconds */
&＃64;-webkit-keyframes secs_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
&＃64;-moz-keyframes secs_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
#clock .secs {height: 400px;left: 155px;position: absolute;top: 249px;width: 400px;
}
#clock .secs div {background-color: #860000;height: 2px;opacity: 0;position: absolute;width: 190px;-moz-animation-name: secs_effect;-moz-animation-duration: 60s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: secs_effect;-webkit-animation-duration: 60s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
...........
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}
/* minutes */
&＃64;-webkit-keyframes mins_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
&＃64;-moz-keyframes mins_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
#clock .mins {height: 300px;left: 175px;position: absolute;top: 249px;width: 300px;
}
#clock .mins div {background-color: #000086;height: 3px;opacity: 0;position: absolute;width: 150px;-moz-animation-name: mins_effect;-moz-animation-duration: 3600s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: mins_effect;-webkit-animation-duration: 3600s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
...........
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}
/* hours */
&＃64;-webkit-keyframes hours_effect {0% {opacity: 1;}8.33% {opacity: 1;}8.34% {opacity: 0;}100% {opacity: 0;}
}
&＃64;-moz-keyframes hours_effect {0% {opacity: 1;}8.33% {opacity: 1;}8.34% {opacity: 0;}100% {opacity: 0;}
}
#clock .hours {height: 300px;left: 175px;position: absolute;top: 249px;width: 300px;
}
#clock .hours div {background-color: #860086;height: 3px;opacity: 0;position: absolute;width: 150px;-moz-animation-name: hours_effect;-moz-animation-duration: 43200s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: hours_effect;-webkit-animation-duration: 43200s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
...........
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}


#clock {background: #fff url(cface.png) 0 0 no-repeat;height: 500px;margin: 0 auto;overflow: hidden;position: relative;width: 500px;-webkit-border-radius: 250px;-moz-border-radius: 250px;-ms-border-radius: 250px;-o-border-radius: 250px;border-radius: 250px;
}
/* seconds */
&＃64;-webkit-keyframes secs_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
&＃64;-moz-keyframes secs_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
#clock .secs {height: 400px;left: 155px;position: absolute;top: 249px;width: 400px;
}
#clock .secs div {background-color: #860000;height: 2px;opacity: 0;position: absolute;width: 190px;-moz-animation-name: secs_effect;-moz-animation-duration: 60s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: secs_effect;-webkit-animation-duration: 60s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
...........
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}
/* minutes */
&＃64;-webkit-keyframes mins_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
&＃64;-moz-keyframes mins_effect {0% {opacity: 1;}1.66% {opacity: 1;}1.67% {opacity: 0;}100% {opacity: 0;}
}
#clock .mins {height: 300px;left: 175px;position: absolute;top: 249px;width: 300px;
}
#clock .mins div {background-color: #000086;height: 3px;opacity: 0;position: absolute;width: 150px;-moz-animation-name: mins_effect;-moz-animation-duration: 3600s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: mins_effect;-webkit-animation-duration: 3600s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
...........
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}
/* hours */
&＃64;-webkit-keyframes hours_effect {0% {opacity: 1;}8.33% {opacity: 1;}8.34% {opacity: 0;}100% {opacity: 0;}
}
&＃64;-moz-keyframes hours_effect {0% {opacity: 1;}8.33% {opacity: 1;}8.34% {opacity: 0;}100% {opacity: 0;}
}
#clock .hours {height: 300px;left: 175px;position: absolute;top: 249px;width: 300px;
}
#clock .hours div {background-color: #860086;height: 3px;opacity: 0;position: absolute;width: 150px;-moz-animation-name: hours_effect;-moz-animation-duration: 43200s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: hours_effect;-webkit-animation-duration: 43200s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
...........
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}

Now – you can understand the main idea. I won’t publish all ‘recurring’ styles for each arrow. Full code you can find in our package.

现在–您可以了解主要思想。 我不会为每个箭头发布所有“重复出现”的样式。 您可以在我们的程序包中找到完整的代码。

步骤4.图片 (Step 4. Images)

For our clock I have used single image (as face of our clock):

对于我们的时钟&＃xff0c;我使用了单个图像(作为我们的时钟)&＃xff1a;

Analog Clock with Pure CSS3 | Script Tutorials
纯CSS3的模拟时钟|脚本教程
现场演示
打包下载

结论 (Conclusion)

Finally we have built our clock! This was difficult, but we did it. I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!

终于&＃xff0c;我们建立了时钟&＃xff01; 这很困难&＃xff0c;但是我们做到了。 希望这会对您的网站有所帮助。 别忘了感谢并发表评论。 祝好运&＃xff01;

翻译自: https://www.script-tutorials.com/analog-clock-with-pure-css3/




推荐阅读
  • get

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • ip

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • php

    设计模式 之 装饰者

    装饰模式（Deocrator）     动态地给一个对象添加一些额外的职责，就增加功能来说，装饰模式比生成子类更为灵活。    所谓装饰，就是一些对象给主题 ... [详细]
  • js

    Material Design Lite ，简洁惊艳的前端工具箱。

    Material Design Lite ，简洁惊艳的前端工具箱。
    2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]
  • php

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • ip

    常用的CSS属性及用法整理

    本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]
  • ip

    CSS |网格行结束属性

    CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • select

    css元素可拖动,如何使用CSS禁止元素拖拽？

    css元素可拖动,如何使用CSS禁止元素拖拽？
    一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]
  • get

    为什么borderimage在CSS中很少被使用，你可能不知道的小知识

    之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]
  • php

    分享css中提升优先级属性!important的用法总结

    分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • get

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响，并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架，常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中，与Spring控制器一起使用时，存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节，并给出了防范该漏洞的建议措施。 ... [详细]
  • ip

    java web之jsp初学习

    JavaWeb介绍概念JavaWeb，是用Java技术来解决相关web互联网领域的技术总和。web包括：web服务器和web客户端两部分。Java在客户端的应用有javaapplet，不过使 ... [详细]
  • ip

    北交桑基韬：“超”人的机器学习，非语义特征的得与失

    北交桑基韬：“超”人的机器学习，非语义特征的得与失
    点击蓝字关注我们AITIME欢迎每一位AI爱好者的加入！作者|桑基韬整理|维克多人工智能目前最大的“拦路虎”是不可信赖性，以深度学习为基础的算法 ... [详细]
  • ip

    微信小程序打开红包的css_【微信小程序】——wxss引用外部CSS文件及iconfont

    小程序引入外部文件的方式是：import**.wxss;因为业务需要，正在开发的小程序中需要使用iconfont，很容易想到了H5的引 ... [详细]
  • get

    Python爬虫爬点大家喜欢的东西

    Python爬虫爬点大家喜欢的东西
    要说最美好的欲望莫过于看黑丝美眉。一、技术路线requests：网页请求BeautifulSoup：解析html网页re：正则表达式& ... [详细]
author-avatar
mobiledu2502870073
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有