Maison > Article > interface Web > Comment obtenir un effet d'horloge en CSS3
Comment obtenir un effet d'horloge en CSS3
- 一个新手original
- 2017-10-18 09:31:591928parcourir
Utilisez l'attribut de transformation CSS3 pour représenter l'échelle de l'horloge et l'angle du pointeur. Le code est le suivant :
<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>.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple CSS3 pur de réalisation de petites flèches que l'on trouve couramment dans les pages WebArticle suivant：Exemple CSS3 pur de réalisation de petites flèches que l'on trouve couramment dans les pages Web