timers.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3圆盘时钟动画</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="author" content="Dajun" />
<style type="text/css">
body,
div,
p,
span,
ul,
li,
ol,
dl,
dt,
dd {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
width: 100%
}
.t1 {
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at 50% 70%, hsla(240, 1%, 90%, 1), hsla(225, 8%, 28%, 1));
}
.t2 {
position: relative;
width: 100%;
height: 100%;
background-image: radial-gradient(farthest-side ellipse at 50% 70%, hsla(210, 1%, 78%, 0.73) 100px, rgba(150, 150, 150, 0.7) 400px, hsla(225, 4%, 18%, 0.8) 100%);
z-index: -3;
}
.t3 {
position: absolute;
left: 50%;
margin-left: -175px;
top: 30%;
height: 350px;
width: 350px;
border-radius: 60px;
background: #fff;
background-image: linear-gradient(#ffffff 40px, #ddecf2 210px, #d3e3e9);
}
.t3:before {
content: "";
position: absolute;
box-shadow: 0px -4px 3px 3px #b8bdca inset;
border-radius: 60px;
opacity: 0.6;
height: 100%;
width: 100%;
-webkit-filter: blur(1px);
z-index: 2;
}
.t3:after {
content: "";
height: 17px;
width: 300px;
position: absolute;
top: 97%;
margin-left: 25px;
background: #2a2a2b;
-webkit-filter: blur(7px);
/*Chrome, Opera*/
z-index: -1;
}
.t4 {
position: relative;
margin: 71px;
width: 210px;
height: 210px;
border-radius: 50%;
background-image: linear-gradient(#f9fdff, #d9eaf8);
box-shadow: 0px 0px 28px -8px #eaf7fb;
z-index: 11;
font-size: 20px;
;
color: #8da6b8;
font-family: Arial;
}
.t4 i {
font-style: normal
}
.hour {
position: absolute;
}
.hour3 {
right: 30px;
top: 50%;
margin-top: -7px;
}
.hour6 {
left: 50%;
bottom: 27px;
margin-left: -5px;
}
.hour9 {
left: 30px;
top: 50%;
margin-top: -7px;
}
.hour12 {
left: 50%;
top: 30px;
margin-left: -10px;
}
.t4:before {
content: "";
position: absolute;
width: 210px;
height: 210px;
border-radius: 50%;
box-shadow: 0px 15px 24px -5px #7a8fae;
z-index: 10;
}
.t4:after {
content: "";
left: 0px;
top: 0px;
position: absolute;
width: 210px;
height: 210px;
border-radius: 50%;
box-shadow: 0px 4px 4px -1px #7a8fae;
z-index: 9;
}
#miao,
#fen,
#shi {
position: absolute;
left: 50%;
height: 210px;
width: 10px;
margin-left: -5px;
}
#miao {
z-index: 23;
}
#fen {
z-index: 22;
}
#shi {
z-index: 21;
}
#shi:after {
content: "";
height: 60px;
width: 6px;
position: absolute;
top: 60px;
left: 2px;
background: #1aa9d8;
border-radius: 8px 8px 8px 8px;
z-index: -1;
}
#fen:after {
content: "";
height: 65px;
width: 4px;
position: absolute;
top: 60px;
left: 3px;
background: #23bcef;
border-radius: 8px 8px 8px 8px;
z-index: -1;
}
#miao:after {
content: "";
height: 80px;
width: 1px;
position: absolute;
top: 48px;
left: 4px;
background: #0dc1fd;
z-index: -1;
/*box-shadow: 5px 10px 8px 3px #B2C3D4;*/
}
#point {
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin-left: -8px;
margin-top: -8px;
z-index: 999;
border-radius: 50%;
box-shadow: 0px 3px 8px -1px #0f4873;
}
#point:before,
#point:after {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 0%;
background: #8ba3b6;
border-radius: 50%;
z-index: 1;
}
#point:before {
width: 16px;
height: 16px;
}
#point:after {
background: #cee3ec;
left: 3px;
top: 3px;
}
</style>
</head>
<body>
<div class="t2">
<div class="t3">
<div class="t4">
<i class="hour hour3">3</i>
<i class="hour hour6">6</i>
<i class="hour hour9">9</i>
<i class="hour hour12">12</i>
<div id="miao"></div>
<div id="fen"></div>
<div id="shi"></div>
<div id="point"></div>
</div>
</div>
</div>
<script type="text/javascript">
var miao = document.getElementById("miao");
var fen = document.getElementById("fen");
var shi = document.getElementById("shi");
var clock = setInterval(function() {
var nowDate = new Date(); //每次读取当前时间
var hour = nowDate.getHours();
var minute = nowDate.getMinutes();
var second = nowDate.getSeconds();
var circleHour = hour % 12 * 30;
shi.style.transform = "rotate(" + circleHour + "deg)"; //读取到的时间为24小时制，转换为12小时
fen.style.transform = "rotate(" + minute * 6 + "deg)";
miao.style.transform = "rotate(" + second * 6 + "deg)";
}, 1000);
</script>
</body>
</html>
网友评论