【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

使用CSS3纯代码来实现模拟时钟，及指针动画功能。
在这里主要使用到css3一些基本元素：
border-radius：圆角边框，画圆形；表盘
Transform：变换，旋转，扭曲；刻度盘，指针形状
Animation：时分秒指针转动。
:before/:after :伪元素

基本思路：

 <div id="clock" class=""><ul><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="kedu"></li><li class="shzi s3">3</li><li class="shzi s6">6</li><li class="shzi s9">9</li><li class="shzi s12">12</li><li class="hh"></li><li class="mm"></li><li class="ss"></li><li class="ms"></li><li class="biaopan"></li><li class="biaozhou"></li><li class="logo">♔</li></ul></div>

-----------------------
1.使用div+css画圆来定义时钟底盘，使用其伪类:before和:after，相当于增加两个容器，用于设计表盘轮廓或定位线；使用border-radius属性设计圆形。

图1.使用伪元素将一个div变为三个可用的容器。

<!DOCTYPE html>
<html><head><title> new document </title><meta charset="utf-8" /><style type="text/css">#clock{position:absolute;width:50px;height:50px;background:#000;border-radius:10px;}#clock:before{content:" ";position:absolute;top:20px;left:20px;width:50px;height:50px;background:#0f0;border-radius:20px;}#clock:after{content:" ";position:absolute;top:40px;left:40px;width:50px;height:50px;background:#f0f;border-radius:100%;border-radius:25px;}</style></head><body><div id="clock" class="">  </div></body>
</html>

2.使用li的block属性设计两端的边框来定义时钟的60个刻度。设置li的上下边框线使其成为2个刻度，使用li的伪类:before和:after，分别增加2个刻度；即时，1个li元素就可以定义3个层块6个刻度。所以，需要10个li来完成60十个刻度。
<style type="text/css">
.Numerals{
display:inline-block;
width:3px;height:351px;
top:11px;left:203px;
border-top:15px solid #000;
border-bottom:15px solid #000;
}

</style>
<ul>
<li class="Numerals"></li>
<li></li>
</ul>
然后通过旋转完成60个刻度。

3.定义指针：li为指针主体，li:before和li:after来定义指针头部和尾部（矩形变形为菱形transform:rotate(-45deg) skew(-30deg,-30deg);，矩形3角圆角为水滴型border-radius:100% 0 100% 100%;）

4.指针动画：定位好表轴位置（旋转点）transform-origin:2px 100%;然后设计秒针分针时针的旋转动画即可：秒针每秒跳一格6度，60秒360度；分针12秒跳一格6度，3600秒360度；时针可以设计为连续走、每秒跳或按格跳、按半格跳等。

.hourHand{ animation:anim_hr 43200s linear infinite; }
.minuteHand{ animation:anim_min 3600s steps(60) infinite; }
.secondHand{ animation:anim_sec 60s steps(60) infinite; }

@keyframes anim_sec{
from{transform:rotate(0deg) ;}
to{ transform:rotate(360deg) ;}
}
@keyframes anim_min{
to{ transform:rotate(360deg) ;}
}
@keyframes anim_hr{
to{ transform:rotate(360deg) ;}
}

5.细节处理：表盘样式、logo、浏览器兼容性等。

6.效果图：

7.全部代码：/*---------------20150915---------------*/

<!DOCTYPE html>
<html >
<head><title> 飛天网事-纯CSS模拟时钟+js对时。 </title><meta charset="utf-8" /><meta name="description" content="飛天网事，WEB前端开发，纯css3代码时钟精彩案例" /><meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" /><meta name="author" content="R.tian @eduppp.cn 2015"><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" />  <meta name="apple-mobile-web-app-status-bar-style"  content="white" />  <meta content="telephone=no" name="format-detection" /> <link rel="shortcut icon" type="image/x-icon" href="/web/css/eduppp.ico" /><link rel="shortcut icon" type="image/x-icon" href="/images/logo4.gif" /><link rel="apple-touch-icon" href="/images/logo.gif" /><link rel="apple-touch-icon" sizes="72x72" href="/images/logo.gif" /><link rel="apple-touch-icon" sizes="114x114" href="/images/logo.gif" />
<style type="text/css">#main{width:375px;height:375px;margin:auto;}#clockDial{/*--------底盘-------------*/position:absolute;z-index:100;width:401px;height:401px;background:#333;border-radius:100%;box-shadow:0 0 15px #000;-webkit-transform:scale(0.6);}/*--------底盘--纵横定位线(调试用）-----------*//*#clockDial:before{content:" ";position:absolute;width:3px;left:202px;height:351px;top:26px;background:#0000ff;}#clockDial:after{content:" ";position:absolute;width:3px;left:202px;height:351px;top:26px;background:#0000ff;transform:rotate(90deg);}*/#clockDial:before{/*--------底盘--边框外阴影-----------*/content:" ";position:absolute;width:442px;left:-21px;height:442px;top:-21px;border-radius:100%;box-shadow:0 0 30px #000;*/}/**/#clockDial:after{/*--------底盘--边框-----------*/content:" ";position:absolute;width:440px;left:-20px;height:440px;top:-20px;border-radius:100%;box-shadow:0 0 20px 10px #003366 inset;}/**/.Numerals{display:inline-block;z-index:3;}.Numerals{/*--------10个刻度线 * 两端----主标签-------*/position:absolute;width:3px;height:351px;top:11px;left:203px;border-top:15px solid #fff;border-bottom:15px solid #fff;box-shadow:0 0 10px 1px #0000ff;transform-origin:50% 50%; -webkit-transform-origin:50% 50%; }.Numerals:before{/*--------10个刻度线 * 两端----副标签-------*/content:" "; position:absolute;width:3px;height:351px;top:-15px;border-top:15px solid #fff;border-bottom:15px solid #fff;transform:rotate(60deg);-webkit-transform:rotate(60deg);box-shadow:0 0 10px 1px #0000ff;transform-origin:50% 50%; -webkit-transform-origin:50% 50%; }.Numerals:after{/*--------10个刻度线 * 两端-----副标签------*/content:" "; position:absolute;width:3px;height:351px;top:-15px;left:0px;border-top:15px solid #fff;border-bottom:15px solid #fff;border-left:0px;border-right:0px;transform:rotate(120deg);-webkit-transform:rotate(120deg);box-shadow:0 0 10px 1px #0000ff;transform-origin:50% 50%; -webkit-transform-origin:50% 50%; }/*--------10个刻度线 * 3线 * 两端 ---方位-----------*/.Numerals:nth-child(2){transform:rotate(6deg);-webkit-transform:rotate(6deg);  }.Numerals:nth-child(3){transform:rotate(12deg);-webkit-transform:rotate(12deg); }.Numerals:nth-child(4){transform:rotate(18deg);-webkit-transform:rotate(18deg); }.Numerals:nth-child(5){transform:rotate(24deg);-webkit-transform:rotate(24deg); }.Numerals:nth-child(6){transform:rotate(30deg);-webkit-transform:rotate(30deg); }.Numerals:nth-child(7){transform:rotate(36deg);-webkit-transform:rotate(36deg); }.Numerals:nth-child(8){transform:rotate(42deg); -webkit-transform:rotate(42deg); }.Numerals:nth-child(9){transform:rotate(48deg); -webkit-transform:rotate(48deg); }.Numerals:nth-child(10){transform:rotate(54deg);-webkit-transform:rotate(54deg); }.Num{z-index:10;}#clockFace{z-index:5;}#pivot{z-index:11;}#clockFace{/*--------表盘-----------*/display:block;position:absolute;opacity:0.9;top:30px;left:32px;width:343px;height:343px;background:#333;border-radius:100%;}#clockFace:before{/*--------12/6刻度-----------*/content:" ";display:block;position:absolute;width:7px;height:322px;left:50%;top:50%;margin:-191px 0 0 -3px;border-top:30px solid #fff;border-bottom:30px solid #fff;}#clockFace:after{/*--------3/9刻度-----------*/content:" ";display:block;position:absolute;width:7px;height:322px;left:50%;top:50%;margin:-191px 0 0 -3px;border-top:30px solid #fff;border-bottom:30px solid #fff;transform:rotate(90deg);}.Num{/*--------3、6、9、12数字位置-----------*/z-index:9;display:block;position:absolute; left:50%;top:50%;font-size:22pt;color:#fff;}.num3{margin:-15px 0 0 150px}.num6{margin:130px 0 0 -5px}.num9{margin:-15px 0 0 -155px}.num12{margin:-165px 0 0 -10px}/*--------其他数字位置-----------*/.num3:before{content:"1";font-size:16pt;margin:-140px 0 0 -70px;display:block;position:absolute; }.num3:after{content:"2";font-size:16pt;margin:-110px 0 0 -10px;display:block;position:absolute; }.num6:before{content:"4";font-size:16pt;margin:-60px 0 0 145px;display:block;position:absolute; }.num6:after{content:"5";font-size:16pt;margin:-35px 0 0 85px;display:block;position:absolute; }.num9:before{content:"7";font-size:16pt;margin:145px 0 0 70px;display:block;position:absolute; }.num9:after{content:"8";font-size:16pt;margin:52px 0 0 12px;display:block;position:absolute; }.num12:before{content:"10";font-size:16pt;margin:70px 0 0 -140px;display:block;position:absolute; }.num12:after{content:"11";font-size:16pt;margin:-20px 0 0 -80px;display:block;position:absolute; }/*--------表轴原点--------------------------------------------*/#pivot {z-index:90;display:block;position:absolute; left:50%;top:50%;margin:-5px 0 0 -2px;width:11px;height:11px;border-radius:5px;background:#fff;box-shadow:0 0 10px 1px #ff0 ;}/*----------------时针-------------------------------------------*/#hourHand{/*--------时针：主线-----------*/z-index:10;display:block;position:absolute; left:50%;top:50%;margin:-100px 0 0 0;width:7px;height:136px;background:#ff0; box-shadow:0 0 10px #000;opacity:0.7;transform-origin:50% 101px;-webkit-transform-origin:50% 101px;}#hourHand:after{/*--------时针：头-----------*/content:" ";display:block;position:absolute; left:3px;top:-10px;width:20px;height:20px;border-radius:0px 0;transform-origin:0 100%;-webkit-transform-origin:0 100%;transform:rotate(-45deg) skew(-20deg,-20deg);-webkit-transform:rotate(-45deg) skew(-20deg,-20deg);background:#ff0;}#hourHand:before{/*--------时针：尾-----------*/content:" ";display:block;position:absolute; left:2px;top:120px;width:20px;height:20px;border-radius:100% 0 100% 100%;transform-origin:4px 100%;-webkit-transform-origin:4px 100%;transform:rotate(-45deg) ;-webkit-transform:rotate(-45deg) ;background:#ff0;box-shadow:0 0 10px #000;}/*---------------分针--------------------------------------------*/#minuteHand{/*--------分针：主线-----------*/z-index:10;display:block;position:absolute; left:50%;top:50%;margin:-120px 0 0 1px;width:5px;height:156px;background:#0f0; box-shadow:0 0 10px #000;opacity:0.6;transform-origin:50% 121px;-webkit-transform-origin:50% 121px;}#minuteHand:after{/*--------分针：头-----------*/content:" ";display:block;position:absolute; left:2px;top:-10px;width:20px;height:20px;border-radius:0px 0;transform-origin:0 100%;-webkit-transform-origin:0 100%;transform:rotate(-45deg) skew(-30deg,-30deg);-webkit-transform:rotate(-45deg) skew(-30deg,-30deg);background:#0f0;}#minuteHand:before{/*--------分针：尾-----------*/content:" ";display:block;position:absolute; left:2px;top:150px;width:20px;height:20px;border-radius:100% 0 100% 100%;transform-origin:2px 100%;-webkit-transform-origin:2px 100%;transform:rotate(-45deg) ;-webkit-transform:rotate(-45deg) ;background:#0f0;box-shadow:0 0 10px #000;}/*-----------------秒针------------------------------------------*/#secondHand{/*--------秒针：主线-----------*/z-index:10;display:block;position:absolute; left:50%;top:50%;margin:-140px 0 0 2px;width:3px;height:176px;background:#f00; box-shadow:0 0 10px #000;opacity:0.7;transform-origin:50% 141px;-webkit-transform-origin:50% 141px;}#secondHand:after{/*--------秒针：头-----------*/content:" ";display:block;position:absolute; left:2px;top:-10px;width:30px;height:30px;border-radius:5px 0;transform-origin:0 100%;-webkit-transform-origin:0 100%;transform:rotate(-45deg) skew(-30deg,-30deg);-webkit-transform:rotate(-45deg) skew(-30deg,-30deg);background:#f00;}#secondHand:before{/*--------秒针：尾-----------*/content:" ";display:block;position:absolute; left:1px;top:180px;width:20px;height:20px;border-radius:100% 0 100% 100%;transform-origin:2px 100%;-webkit-transform-origin:2px 100%;transform:rotate(-45deg) ;-webkit-transform:rotate(-45deg) ;background:#f00;box-shadow:0 0 10px #000;}/*--------动画:指针----(使用JavaScript脚本対时）-----------------------------------*//* #hourHand{ animation:anim_hr 43200s linear infinite; }#minuteHand{ animation:anim_min 3600s  steps(60) infinite; }#secondHand{ animation:anim_sec 60s steps(60) infinite; }@keyframes anim_sec{from{transform:rotate(0deg) ;}to{ transform:rotate(360deg) ;}}@keyframes anim_min{to{ transform:rotate(360deg) ;}}@keyframes anim_hr{to{ transform:rotate(360deg) ;}}*//*-----------------------------------------------------------*/#millisecond{/*--------毫秒小盘-----------*/z-index:9;display:block;position:absolute;left:50%;left:50%;margin:220px 0 0 -38px;width:80px;height:80px;border:1px dashed #fff;border-radius:100%;background:#555;opacity:0.3;box-shadow:0 0 10px 1px #fff inset;}#millisecond:after{/*--------毫秒：指针----------*/content:" ";display:block;position:absolute;margin:4px 0 0 37px;width:3px;height:35px;border:1px dashed #990099;background:#9900cc;border-radius:100%;opacity:1.5;}#millisecond:after{/*--------毫秒：动画----------*/transform-origin:50% 35px;-webkit-transform-origin:50% 35px;animation:anim_l 1s linear infinite; -webkit-animation:anim_l 1s linear infinite; }@keyframes anim_l{from{ transform:rotate(0deg) ; -webkit-transform:rotate(0deg) ;}to{ transform:rotate(360deg) ; -webkit-transform:rotate(360deg) ;}}/*-----------------------------------------------------------*/#logo{position:absolute;z-index:8;left:191px;top:80px;display:inline;color:#fff;font-size:25px;opacity:1;}#logo:before{content:"eduppp.cn";display:block;position:absolute;font-family:"方正舒体" ;left:50%;top:50%;margin:5px 0 0 -38px;color:#fff;opacity:0.8;font-size:20px;}#logo:after{content:"Copyright @R.tian 2015";display:block;position:absolute;margin:210px 0 0 -45px;width:150px;border:0px solid #cc3300;color:#fff;font-size:12px;opacity:0.6;}#face{z-index:8;position:absolute;left:80px;top:75px;width:250px;height:250px;border:0px solid #09c;background:#0099ff;border-radius:40px;border-radius:40px;opacity:0.1;}#face:before{content:" ";position:absolute;width:250px;height:250px;border:0px solid #00c;background:#0099ff;transform:rotate(60deg);border-radius:40px;-webkit-transform:rotate(60deg);}#face:after{content:" ";position:absolute;width:250px;height:250px;border:0px solid #a9c;background:#0099ff;border-radius:40px;transform:rotate(120deg);-webkit-transform:rotate(120deg);}
</style>
<script type="text/javascript">//----使用Js控制动画时间，每秒对三个指针定位。//----CSS3的动画animation，使用js对时后无法达到三个指针同步（0秒时，三针同时旋转）。/**/window.onload=function() {//当文档加载完成时执行该代码。var clock = new Clock();clock.start();};function Clock() {var d = new Date(); var h = d.getHours() % 12;var m = d.getMinutes();var s = d.getSeconds();this.start = function() {var clock = new Clock();document.getElementById("secondHand").style.webkitTransform="rotate("+s*6+"deg)";document.getElementById("minuteHand").style.webkitTransform="rotate("+m*6+"deg)";document.getElementById("hourHand").style.webkitTransform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";document.getElementById("secondHand").style.transform="rotate("+s*6+"deg)";document.getElementById("minuteHand").style.transform="rotate("+m*6+"deg)";document.getElementById("hourHand").style.transform="rotate("+( h*30+parseInt(m/6)*3 )+"deg)";window.setTimeout(function() {clock.start();}, 500);};}
</script>
</head>
<body>
<div id="main" class=""><div id="clockDial" class=""><ul><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Numerals"></li><li class="Num num3">3</li><li class="Num num6">6</li><li class="Num num9">9</li><li class="Num num12">12</li><li id="hourHand"></li><li id="minuteHand"></li><li id="secondHand"></li><li id="millisecond"></li><li id="clockFace"></li><li id="logo">♔</li><li id="pivot"></li><li id="face"></li></ul></div></div></body>
</html>

--------------------- 本文来自 rtian001 的CSDN 博客，全文地址请点击：https://blog.csdn.net/rtian001/article/details/48684247?utm_source=copy

转载于:https://www.cnblogs.com/7qin/p/9703433.html

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。相关推荐

[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
酷炫纯CSS代码实现时空穿梭动效
效果展示: 使用场景,可以用于大数据大屏背景,或者是穿越动画的过渡,下载地址在文章末尾项目目录结构: html部分: <!doctype html> <html> & ...
纯css代码画的铅笔
下载地址纯css代码画的铅笔,在网页上画一个铅笔图画. dd:
html气球飘落代码,纯CSS代码实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...
纯CSS代码写出各种不规则的形状图形
做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片来切图实现.不过今天新起点博客给大家分享几十种看似简单却又非常强大的纯CSS绘制的图形,里面有最简单 ...
css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...
教你如何用纯CSS代码实现垂直居中
目录方法1:设定行高 ( line-height ) 方法2:绝对定位方法3:利用 transform 方法4:使用表格或假装表格方法5:使用 Flexbox 十种水平垂直居中方案 : 在编辑一 ...
html5网页仿写,纯CSS代码模仿绘制蚂蚁庄园页面
CSS的图形绘制功能还是很强大的,今天就用CSS模仿一个支付宝蚂蚁庄园的页面,当然,说是模仿,因为是电脑页面,又因为时间关系,只能模仿个大概.先把效果图贴出来,截图只能截取静态效果,动画看不出来,大家 ...
css人脸识别的圆圈,一个人脸识别的样式纯CSS代码
一个人脸识别的样式纯纯CSS, 复制下方代码修改下图片路径即可人脸扫码效果 img { position: absolute; /* display: none ...

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。相关推荐

最新文章

热门文章