首页 > 代码库 > 利用css3 transform实现一个时钟
利用css3 transform实现一个时钟
transform:rotate(1deg)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://www.mamicode.com/clock.css"> <title>Clock</title></head><body> <div id="clock"> <div class="pointer" id="hour"></div> <div class="pointer" id="minute"></div> <div class="pointer" id="second"></div> </div> <script> var hourEle = document.getElementById("hour"); var minuteEle = document.getElementById("minute"); var secondEle = document.getElementById("second"); setInterval( function () { var d = new Date(); var hour = d.getHours(); var minute = d.getMinutes(); var second = d.getSeconds(); let hourDeg = (hour%12+minute/60)*30-90; let minuteDeg = (minute+second/60)*6-90; let secondDeg = second*6-90; hourEle.style.transform = "rotate("+hourDeg+"deg)"; minuteEle.style.transform = "rotate("+minuteDeg+"deg)"; secondEle.style.transform = "rotate("+secondDeg+"deg)"; }, 1000 ) </script></body></html>
#clock{ position: relative; width: 100px; height:100px; -webkit-border-radius: 50px; border-radius: 50px; border: 1px solid grey;}.pointer{ transform-origin: left center;}#hour{ width: 30px; height: 4px; background-color: black; position: absolute; top:50%; left: 50%; margin-top: -2px;}#minute{ width: 40px; height: 2px; background-color: blue; position: absolute; top:50%; left: 50%; margin-top: -1px;}#second{ width: 45px; height: 1px; background-color: red; position: absolute; top:50%; left: 50%;}
利用css3 transform实现一个时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。