利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下：
<span style="color: #e8bf6a;"><br><span style="color: #e8bf6a;"> <meta style="color: #bababa;">charset=<span style="color: #a5c261;">"UTF-8"<span style="color: #e8bf6a;">><br><span style="color: #e8bf6a;"> <title>Title<span style="color: #e8bf6a;"></span>
</title>
<br><span style="color: #e8bf6a;"> <style style="color: #bababa;">id=<span style="color: #a5c261;">"style"<span style="color: #e8bf6a;">><br><span style="color: #e8bf6a;"> <span style="color: #cc7832;">html{<span style="color: #bababa;">height:<span style="color: #6897bb;">100%<span style="color: #cc7832;">;<span style="color: #cc7832;">}<br><span style="color: #cc7832;">body {<br> width:100%;<br> height:100%;<br> margin:0;<br> display:-moz-box;<br> display:-webkit-box;<br> display:box;<br> -webkit-box-align: center;<br> -moz-box-align: center;<br> box-align:center;<br> -webkit-box-pack:center;<br> -moz-box-pack:center;<br> box-pack:center;<br>}<br>.clock {<br> width:200px;<br> height:200px;<br> border:4px solid black;<br> border-radius:50%;<br> position:relative;<br>}<br>.clock ul {<br> width:100%;<br> height:100%;<br> position:relative;<br> margin:0;<br> padding:0;<br>}<br>.clock ul li {<br> list-style: none;<br> position:absolute;<br> top:0;<br> left:99px;<br> width:2px;<br> height:5px;<br> background:gray;<br> transform-origin: center 100px;<br>}<br>.clock ul li:nth-of-type(5n+1) {<br> left:98px;<br> width:4px;<br> height:10px;<br> background:black;<br>}<br>.hour {<br> width:8px;<br> height:60px;<br> border-radius:4px;<br> position:absolute;<br> left:96px;<br> top:40px;<br> background-color:black;<br> transform-origin: center 60px;<br> box-shadow:0 0 10px rgba(0,0,0,0.8);<br>}<br>.min {<br> width:6px;<br> height:70px;<br> border-radius:3px;<br> position:absolute;<br> left:97px;<br> top:30px;<br> background-color:#2b2b2b;<br> transform-origin: center 70px;<br> box-shadow:0 0 10px rgba(0,0,0,0.6);<br>}<br>.sec {<br> width:4px;<br> height:80px;<br> border-radius:2px;<br> position:absolute;<br> left:98px;<br> top:20px;<br> background-color:red;<br> transform-origin: center 80px;<br> box-shadow:0 0 10px rgba(255,0,0,0.5);<br>}<br>.center {<br> width:16px;<br> height:16px;<br> box-shadow:0 2px 5px rgba(0,0,0,0.5);<br> border-radius:50%;<br> position:absolute;<br> left:92px;<br> top:92px;<br> background-image: radial-gradient(white,gray);<br>}<br></style>
<span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #e8bf6a;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #e8bf6a;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #e8bf6a;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #e8bf6a;"><span style="color: #cc7832;"><span style="color: #e8bf6a;"><span style="color: #6897bb;"><span style="color: #e8bf6a;"><span style="color: #6897bb;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #e8bf6a;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #a5c261;"><span style="color: #cc7832;"><span style="color: #cc7832;"><span style="color: #bababa;"><span style="color: #6897bb;"><br><br> <br> <p class="clock"> <br> </p>
<ul id="tickBox"> <br> </ul> <br> <p class="hour" id="hour"></p> <br> <p class="min" id="min"></p> <br> <p class="sec" id="sec"></p> <br> <p class="center"></p> <br> <br> <script> <br> window.onload = function(){ <br> var oUl = document.getElementById("tickBox"); <br> var oStyle = document.getElementById("style"); <br> var liStr = ""; <br> var styleStr = ""; <br> for(var i=0;i<60;i++){ <br> styleStr += '.clock ul li:nth-of-type('+(i+1)+'){transform: rotate('+i*6+'deg);}'; <br> liStr += '<li>'; <br> } <br> oStyle.innerHTML += styleStr; <br> oUl.innerHTML = liStr; <br> var oHour = document.getElementById("hour"); <br> var oMin = document.getElementById("min"); <br> var oSec = document.getElementById("sec"); <br> function getTime(){ <br> var timer = new Date(); <br> var sec = timer.getSeconds(); <br> var min = timer.getMinutes(); <br> var hour = timer.getHours(); <br> var tranS = sec*360/60; <br> var tranM = (min+sec/60)*360/60; <br> var tranH = (hour + min/60)*360/12; <br> oSec.style.transform = 'rotate('+tranS+'deg) translateZ(-1px)'; <br> oMin.style.transform = 'rotate('+tranM+'deg) translateZ(-1px)'; <br> oHour.style.transform = 'rotate('+tranH+'deg) translateZ(-1px)'; <br> } <br> setInterval(getTime,1000); <br> getTime(); <br> } <br> </script><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
