ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3で時計効果を実現する方法
CSS3で時計効果を実現する方法
- 一个新手オリジナル
- 2017-10-18 09:31:591969ブラウズ
CSS3 変換属性を使用して、時計のスケールとポインターの角度を表現します。 コードは次のとおりです。
<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>以上がCSS3で時計効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。