【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
【CSS3】纯CSS代码实现模拟时钟，+js对时功能。的更多相关文章
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- 纯css代码写旋转动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...
- 页面元素固定在页面底部的纯css代码（兼容IE6）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分享一段css代码学到的js知识
[].forEach.call($$('*'),function(val){ val.style.outline = '1px solid #'+(~~(Math.random()*(1<< ...
- 纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）
<style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
随机推荐
- 7.22 python线程(3)
2018-7-22 10:28:29 回来啦! 6.条件 # !/usr/bin/env python # !--*--coding:utf-8 --*-- # !@Time :2018/7/20 1 ...
- 【Python算法】遍历(Traversal)、深度优先(DFS)、广度优先(BFS)
图结构: 非常强大的结构化思维(或数学)模型.如果您能用图的处理方式来规范化某个问题,即使这个问题本身看上去并不像个图问题,也能使您离解决问题更进一步. 在众多图算法中,我们常会用到一种非常实用的思维 ...
- iOS电话等中断事件的开始和结束通知
#import "ViewController.h" #import <AVFoundation/AVFoundation.h> @interface ViewCont ...
- 通过微信服务号推送Zabbix告警
近期看到一篇通过微信实现Zabbix告警的文章,但实践时发现,无法成功发送消息. 分析原因,应该是微信公众平台加强了登录验证,在登录时会需要管理员进行扫描二维码操作才能成功登陆后台: 而之前文章中的A ...
- the command line tools
PhpStorm 10.0.2 http://stackoverflow.com/questions/22572861/error-cant-use-subversion-command-line-c ...
- jquery中的ajax方法参数的用法和他的含义：
转自:https://www.cnblogs.com/huiyuantang/p/5458278.html 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.ty ...
- Django - 学习目录
Django 基础 web应用/http协议/web框架 Django简介 Django - 路由层(URLconf) Django - 视图层 Django - 模板层 Django - 模型层 - ...
- centos7 安装ftp
安装VSFTPD 1.首先确认系统内无VSFTPD. rpm -qa|grep vsftpd 若有的话会显示vsftpd-x.x.x.-x.xxx.x86_64 若没有的话会空返回 2.安装VSFTP ...
- Constructing Roads----poj2421（最小生成树Kruskal）
题目链接: http://poj.org/problem?id=2421 想把n个村庄连接在一起:求最小生成树,不同的是已经有了m条线段链接在一起了,求剩下的: 感觉用Kruskal会简单一点 #in ...
- 洛谷 P4697 Balloons [CEOI2011] 单调栈/dp (待补充qwq)
正解:单调栈/dp 解题报告: 先放个传送门qwq 话说这题是放在了dp的题单里呢?但是听说好像用单调栈就可以做掉所以我就落实下单调栈的解法好了qwq (umm主要如果dp做好像是要斜率优化凸壳维护双 ...