Heim > Artikel > Web-Frontend > So erzielen Sie einen Takteffekt in CSS3
So erzielen Sie einen Takteffekt in CSS3
- 一个新手Original
- 2017-10-18 09:31:591928Durchsuche
Verwenden Sie das CSS3-Transformationsattribut, um die Skala der Uhr und den Winkel des Zeigers darzustellen. Der Code lautet wie folgt:
<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>Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Takteffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Reines CSS3-Beispiel für die Umsetzung kleiner Pfeile, die häufig auf Webseiten zu finden sindNächster Artikel：Reines CSS3-Beispiel für die Umsetzung kleiner Pfeile, die häufig auf Webseiten zu finden sind