<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆形的摇摆时钟CSS3特效 - 更多源码WW.96flw.COM</title>
<style>
/*表盘边框*/
.clock {
/* 设置大小 */
width: 400px;
height: 400px;
position: relative;
margin: 40px auto auto auto;
/*上边距*/
border-radius: 50%;
/*圆形*/
box-shadow: 0 0 36px rgba(0, 0, 0, .2);
/*表盘阴影*/
background: #fff;
border: 16px solid rgb(15,199,247);
}
.dial {
width: 100%;
height: 100%;
position: relative;
position: absolute;
top: 0;
left: 0;
}
.dial div {
width: 0px;
height: 200px;
position: absolute;
left: 200px;
transform: rotate(0deg);
transform-origin: bottom right;
}
.dial div i {
float: left;
margin-top: 20px;
margin-left: -10px;
font-style: normal;
width: 20px;
text-align: center;
font-style: 18px;
}
.dial div:after {
content: "";
position: absolute;
background: rgb(15,199,247);
width: 2px;
height: 8px;
left: -1px;
}
.dial div.five:after {
position: absolute;
content: "";
width: 4px;
height: 18px;
left: -2px;
top: 0;
background: rgb(15,199,247);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/*秒针*/
.second {
width: 1px;
height: 200px;
background: red;
position: absolute;
left: 200px;
/*距离表盘宽度一半*/
margin-top: 30px;
z-index: 10;
transform: rotate(0deg);
transform-origin: center 170px;
/*定位旋转位置*/
}
/*表盘圆红心*/
.second:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
bottom: 20px;
left: -10px;
}
.minute {
width: 2px;
height: 140px;
background: #8b8b8d;
position: absolute;
left: 199px;
margin-top: 60px;
z-index: 9;
transform-origin: center bottom;
transform: rotate(12deg);
animation: minute 60s linear infinite;
}
/*时针
*/
.hour {
width: 6px;
height: 100px;
background: #333;
position: absolute;
left: 197px;
margin-top: 100px;
z-index: 8;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
transform: rotate(2deg);
transform-origin: center bottom;
animation: minute 60s linear infinite;
}
/*摆锤*/
.swing {
width: 6px;
height: 80px;
position: absolute;
left: 197px;
top: 400px;
background: #137fe4;
z-index: -1;
transform: rotate(-30deg);
transform-origin: 3px top;
animation: swing 1s infinite;
}
.swing:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: #137fe4;
border-radius: 50%;
bottom: -15px;
left: -12px;
}
@keyframes swing {
0% {
transform: rotate(-30deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(-30deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div id="dial" class="dial"></div>
<div id="second" class="second"></div>
<div id="minute" class="minute"></div>
<div id="hour" class="hour"></div>
<div class="swing"></div>
</div>
<script>
var dial = document.getElementById("dial");
var secondId = document.getElementById("second");
var minuteId = document.getElementById("minute");
var hourId = document.getElementById("hour");
/*获取当前时间
*
*/
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
/*计算页面指针加载时的角度
*/
hourDeg = 360 * (hour % 12) / 12;
minuteDeg = 360 * minute / 60;
secondDeg = 360 * second / 60;
hourId.style.transform = "rotate(" + hourDeg + "deg)";
minuteId.style.transform = "rotate(" + minuteDeg + "deg)";
secondId.style.transform = "rotate(" + secondDeg + "deg)";
var Deg = 0;
for (var i = 0; i < 60; i++) {
var ke = document.createElement("div"); //创建一个div
var hourNum = i / 5; //当为5时
if (hourNum == 0) hourNum = 12;
if (i % 5 == 0) { //大刻度
ke.className = "five";
ke.innerHTML = "<i>" + hourNum + "</i>"
}
ke.style.transform = "rotate(" + Deg + "deg)";
dial.appendChild(ke);
Deg += 6;
}
function loopSecond() {
secondDeg = 360 * second / 60;
baseMinuteDeg = 360 * minute / 60;
baseHourDeg = 360 * (hour % 12) / 12;
minuteDeg = baseMinuteDeg + (6 * second / 60);
hourDeg = baseHourDeg + (30 * minute / 60);
hourId.style.transform = "rotate(" + hourDeg + "deg)";
minuteId.style.transform = "rotate(" + minuteDeg + "deg)";
secondId.style.transform = "rotate(" + secondDeg + "deg)";
second += 1;
if (second > 60) {
second = 1;
minute += 1;
}
if (minute == 60) {
minute = 0;
hour += 1;
}
setTimeout(function(){
loopSecond();
},1000);
}
loopSecond();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码:<a href="http://WW.96flw.COM/" target="_blank">尽在WW.96flw.COM</a></p>
</div>
</body>
</html>