So erzielen Sie einen Takteffekt in CSS3-CSS-Tutorial-php.cn

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 += &#39;.clock ul li:nth-of-type(&#39;+(i+1)+&#39;){transform: rotate(&#39;+i*6+&#39;deg);}&#39;;                <br/>　　　　　　　　liStr += &#39;<li></li>&#39;;           <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 = &#39;rotate(&#39;+tranS+&#39;deg) translateZ(-1px)&#39;;               <br/>　　　　　　　　oMin.style.transform = &#39;rotate(&#39;+tranM+&#39;deg) translateZ(-1px)&#39;;               <br/> 　　　　　　　 oHour.style.transform = &#39;rotate(&#39;+tranH+&#39;deg) translateZ(-1px)&#39;;            <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>
Nach dem Login kopieren
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!