css3實現鐘錶效果的方法-css教學-PHP中文網

首頁

web前端

css教學

css3實現鐘錶效果的方法

一个新手

Oct 18, 2017 am 09:31 AM

css css3

利用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 += &#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>

登入後複製

以上是css3實現鐘錶效果的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn