使用純CSS3屬性來實現轉動時鐘
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF⑻">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
border: 10px solid #ccc;
border-radius: 110px;
margin: 100px auto;
position: relative;
}
.line {
width: 4px;
height: 200px;
background: #ccc;
position: absolute;
left: 50%;
margin-left: ⑵px;
}
/*時鐘刻度線*/
.line1 {
transform: rotate(30deg);
}
.line2 {
transform: rotate(60deg);
}
.line3 {
transform: rotate(90deg);
}
.line4 {
transform: rotate(120deg);
}
.line5 {
transform: rotate(150deg);
}
.line6 {
transform: rotate(180deg);
}
/*將刻度線遮住，只留1點點*/
.mask {
width: 180px;
height: 180px;
background: #fff;
border-radius: 90px;
position: absolute;
margin: 10px;
}
/*時針*/
.hour {
width: 8px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: ⑷px;
margin-top: ⑸0px;
/*43200s勻速轉動1圈*/
animation: move 43200s linear infinite;
/*設置旋轉的中心點為中間底部*/
transform-origin: center bottom;
}
/*分針*/
.minute {
width: 6px;
height: 60px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: ⑶px;
margin-top: ⑹0px;
/*3600s轉1圈，勻速轉動*/
animation: move 3600s linear infinite;
/*設置旋轉的中心點為中間底部*/
transform-origin: center bottom;
}
/*秒針*/
.second {
width: 4px;
height: 80px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: ⑵px;
margin-top: ⑻0px;
/*60s轉1圈，分60步*/
animation: move 60s infinite steps(60);
/*設置旋轉的中心點為中間底部*/
transform-origin: center bottom;
}
/*最中心的遮罩層*/
.circle {
width: 12px;
height: 12px;
border-radius: 6px;
background: #ccc;
position: absolute;
left: 50%;
margin-left: ⑹px;
margin-top: 90px;
}
/*旋轉從0度到360度*/
@keyframes move {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="mask"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="circle"></div>
</div>
</body>
</html>
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
