首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

纯CSS3实现运行时钟的示例代码

Posted in HTML / CSS onJanuary 25, 2021

运行效果

纯CSS3实现运行时钟的示例代码

代码实现

html

<div id="watch">
  <div class="frame-face"></div>
  <ul class="minute-marks">
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
  <div class="digital-wrap">
    <ul class="digit-hours">
      <li>23</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>
    </ul>
    <ul class="digit-minutes">
      <li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li>
    </ul>
    <ul class="digit-seconds">
      <li>20</li><li>21</li><li>22</li><li>23</li>
      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li>
    </ul>
  </div>
  <ul class="digits">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ul>
  <div class="hours-hand"></div>
  <div class="minutes-hand"></div>
  <div class="seconds-hand"></div>
</div>

CSS3

body { font-size:62.5%; margin:1em; background:#232425 }
ul { list-style:none; margin:0; padding:0 }
#watch { font-size:1em; position:relative }
#watch .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #f9f9f9,#666);
  background:-moz-linear-gradient(top, #f9f9f9,#666);
  background:linear-gradient(to bottom, #f9f9f9,#666);
  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}
#watch .frame-face:before {
  content:'';
  width:29.4em;
  height:29.4em;
  border-radius:14.7em;
  position:absolute;
  top:.3em; left:.3em;
  background:
    -webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
    -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  background:
    -moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
    -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  background:
    linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
    radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
}
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
  box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
  border:.1em solid rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top, #fff, #ccc);
  background:-moz-linear-gradient(top, #fff, #ccc);
  background:linear-gradient(to bottom, #fff, #ccc);
}
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#watch .digits {
  width:30em;
  height:30em;
  border-radius:15em;
  position:absolute;
  top:0; left:50%;
  margin-left:-15em;
}
#watch .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.8em 0 0 -.8em;
  font-weight:bold;
}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }
#watch .digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#121314;
}
#watch .digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
  border:.1em solid #c6c6c6;
  background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
}
@keyframes hours { to {transform:rotate(335deg)} }
#watch .hours-hand {
  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  transform:rotate(-25deg);
  animation:hours 43200s linear 0s infinite;
}
#watch .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}
@keyframes minutes { to {transform:rotate(422deg)} }
#watch .minutes-hand {
  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  transform:rotate(62deg);
  animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#watch .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  transform:rotate(120deg);
  animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}
#watch .digital-wrap {
  width:9em;
  height:3em;
  border:.1em solid #222;
  border-radius:.2em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  background:#4c4c4c;
  background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%);
  background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
}
#watch .digital-wrap ul {
  float:left;
  width:2.85em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
}
#watch .digital-wrap ul:last-child { border:none }
#watch .digital-wrap li {
  font-size:1.5em;
  line-height:2;
  letter-spacing:2px;
  text-align:center;
  position:relative;
  left:1px;
}
#watch .digit-minutes li {
  animation:dsm 3600s steps(60, end) 0s infinite;
}
#watch .digit-seconds li {
  animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm {
  to { transform:translateY(-120em) }
}

以上就是纯CSS3实现运行的时钟的详细内容，更多关于CSS3 时钟的资料请关注三水点靠木其它相关文章！

纯CSS3实现运行时钟的示例代码

- Author -

JcqbE

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
详解css3 Transition属性（平滑过渡菜单栏案例）
Sep 05 HTML / CSS
CSS3中的display:grid，网格布局介绍
Oct 30 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 #HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 #HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 #HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 #HTML / CSS
使用CSS3制作版头动画效果
Dec 24 #HTML / CSS
CSS3实现红包抖动效果
Dec 23 #HTML / CSS
html5+css3之制作header实例与更新
Dec 21 #HTML / CSS
忘记密码(1) 增删改查(2) B+树(2) muduo(1) TcpServer(1) Fragment(1) 存储过程(3) pt-archiver(1) ICF-5900W(2) instantclient(1)
You might like
我用php+mysql写的留言本
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php中的观察者模式简单实例
2015/01/20 PHP
php中strtotime函数性能分析
2016/11/20 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
javascript实现实时输出当前的时间
2015/04/27 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
全球最大的生存食品、水和装备专用在线市场：BePrepared.com
2020/01/02 全球购物
法国春天百货官网：Printemps.com
2020/06/29 全球购物
Java里面有没有全局变量？为什么？
2015/02/06 面试题
可靠的数据流传输TCP
2016/03/15 面试题
铭立家具面试题
2012/12/06 面试题
员工入职担保书范文
2014/04/01 职场文书
大学社团活动总结
2014/04/26 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
车位出租协议书范本
2016/03/19 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android