javascript實現時鐘動畫
阿新 • • 發佈：2020-12-05
本文例項為大家分享了javascript實現時鐘動畫的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>時針轉動</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
* {
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,78%,0.73) 100px,rgba(150,150,0.7) 400px,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;
}
#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 shi = document.querySelector('#shi');
var fen = document.querySelector('#fen');
var miao = document.querySelector('#miao');
setInterval(function() {
var nowDate = new Date();
// 獲取時分秒
var hour = nowDate.getHours();
var minute = nowDate.getMinutes();
var second = nowDate.getSeconds();
var houerTw = hour % 12 * 30;
var minuteTW = minute * 6;
var secondTW = second * 6;
console.log(houerTw);
// 變數在拼接是要注意不能加入空格
shi.style.transform = 'rotate(' + houerTw + 'deg)';
fen.style.transform = 'rotate(' + minuteTW + 'deg)';
miao.style.transform = 'rotate(' + secondTW + 'deg)';
},1000)
</script>
</body>
</html>效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。