html css js炫酷时钟动画特效,可供学习参考使用,也可以在自己项目中使用
<!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>前端哥-时钟动画特效</title> <style> html,body { width: 100%; height: 100%; margin: 0px 0px; padding: 0px 0px;} body { background-color: #333;} /*表盘边框*/ .clock { /* 设置大小 */ width: 400px; height: 400px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: auto auto; /*上边距*/ border-radius: 50%; /*圆形*/ box-shadow: 0 0 36px rgba(0, 0, 0, .2); /*表盘阴影*/ background: #fff; border: 16px solid rgba(102,150,6,1); } .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: rgba(3,129,167,1); 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: #FFFFFF; z-index: -1; transform: rotate(-30deg); transform-origin: 3px top; animation: swing 1s infinite; } .swing:after { content: ""; position: absolute; width: 30px; height: 30px; background: #FFFFFF; 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></body></html>