首頁  >  文章  >  web前端  >  css3實現鐘錶效果的方法

css3實現鐘錶效果的方法

一个新手
一个新手原創
2017-10-18 09:31:591910瀏覽

利用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