HTML5時(shí)鐘特效是前端開發(fā)中一種很有趣的特效，它可以通過HTML5、CSS3和JavaScript來實(shí)現(xiàn)。
下面為大家介紹一段HTML5時(shí)鐘特效的代碼，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5時(shí)鐘特效</title>
<style type="text/css">
/*樣式代碼*/
body {
background-color: #2b2b2b;
}
#clock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px #fff;
z-index: 999;
}
#hour-hand, #minute-hand, #second-hand {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 70px;
border-radius: 3px;
transform-origin: bottom;
background-color: #000;
z-index: 1000;
}
#hour-hand {
transform: translate(-50%, -100%) rotateZ(150deg);
transition: all .5s linear;
}
#minute-hand {
transform: translate(-50%, -100%) rotateZ(0deg);
transition: all .5s linear;
}
#second-hand {
transform: translate(-50%, -100%) rotateZ(60deg);
transition: all .5s linear;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour-hand"></div>
<div id="minute-hand"></div>
<div id="second-hand"></div>
</div>
<script type="text/javascript">
/*JavaScript代碼*/
var hourHand = document.querySelector("#hour-hand");
var minuteHand = document.querySelector("#minute-hand");
var secondHand = document.querySelector("#second-hand");
//獲取時(shí)分秒
function getTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
//時(shí)針旋轉(zhuǎn)角度，每小時(shí)30度，每分鐘0.5度
var hourDegrees = (hours * 30) + (minutes * 0.5);
//分針旋轉(zhuǎn)角度，每分鐘6度
var minuteDegrees = minutes * 6;
//秒針旋轉(zhuǎn)角度，每秒6度
var secondDegrees = seconds * 6;
hourHand.style.transform = "translate(-50%, -100%) rotateZ(" + hourDegrees + "deg)";
minuteHand.style.transform = "translate(-50%, -100%) rotateZ(" + minuteDegrees + "deg)";
secondHand.style.transform = "translate(-50%, -100%) rotateZ(" + secondDegrees + "deg)";
}
setInterval(getTime, 1000); //每秒執(zhí)行一次getTime函數(shù)
</script>
</body>
</html>以上是一段基礎(chǔ)的HTML5時(shí)鐘特效代碼，可以根據(jù)實(shí)際需求進(jìn)行修改。特效的實(shí)現(xiàn)需要CSS3的旋轉(zhuǎn)變換和JavaScript獲取當(dāng)前時(shí)間的API，并結(jié)合運(yùn)算得出每個(gè)時(shí)鐘針的旋轉(zhuǎn)角度。希望這篇文章對你有所幫助，讓你更好地了解HTML5時(shí)鐘特效。
上一篇html5日期選擇框代碼
下一篇scrapy css語法