【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
来源：互联网 发布：安装ubuntu lts 编辑：程序博客网 时间：2024/05/09 19:32
使用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> 0 0
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
- css代码模拟时钟 +js对时
- css3+js+html实现模拟时钟
- 纯html、css3、js的时钟
- js模拟时钟代码
- 纯js代码实现扫描下载功能
- +【CSS3】使用纯css代码实现图片轮播效果
- 使用纯CSS3实现转动时钟案例
- 纯css3实现圆盘时钟动画效果
- css3+js 实现时钟效果
- JS实现时钟功能
- 帧动画功能 纯js控制css代码
- 纯CSS3时钟
- js+css3实现动态时钟-------Day66
- 用代码实现时钟功能
- css3模拟时钟
- 纯js css3 实现loading demo
- 纯css动态时钟
- GPS定位\基站定位\WiFi辅助定位及其其他定位原理详解
- 微信公众号笔记---本地调试微信接口
- C# datatable中重复数据去重
- CentOS 6.6下的J2EE环境搭建（三）之Apache安装
- Mybatis类型转换TypeHandler介绍
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
- redis简单命令汇总
- java 安全了解
- Linux在虚拟机中无法上网的解决方法
- Android App使用Jsoup抓取网页数据显示
- Struts2漏洞为互联网带来严重安全风险
- 插入耳机，先按音量键，再预览铃声的时候正常；但先预览铃声再按音量键的时候，音量偏大。
- LeetCode(51) Symmetric Tree
- js中的this
