Rumah >hujung hadapan web >tutorial css >css3实现钟表效果的方法
css3实现钟表效果的方法
- 一个新手asal
- 2017-10-18 09:31:591968semak imbas
利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下：
<span style="color: #e8bf6a;"><head><br/><span style="color: #e8bf6a;"> <meta <span 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;"></title><br/><span style="color: #e8bf6a;"> <style <span 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/></head><br/><body> <br/> <p class="clock"> <br/> <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/> </p> <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></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/></body></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></span></span></span></span></span></span></span></span></span></span></span></span>Atas ialah kandungan terperinci css3实现钟表效果的方法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：纯CSS3实现网页中常见的小箭头的实例Artikel seterusnya：Bootstrap栅格化解析