css3實現鐘錶效果的方法

最後更新：2017-10-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

利用css3 transform屬性刻畫鐘錶的的刻度以及指標的角度,代碼如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style id="style">
        html{height:100%;}
body {
    width:100%;
    height:100%;
    margin:0;
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align:center;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    box-pack:center;
}
.clock {
    width:200px;
    height:200px;
    border:4px solid black;
    border-radius:50%;
    position:relative;
}
.clock ul {
    width:100%;
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}
.clock ul li {
    list-style: none;
    position:absolute;
    top:0;
    left:99px;
    width:2px;
    height:5px;
    background:gray;
    transform-origin: center 100px;
}
.clock ul li:nth-of-type(5n+1) {
    left:98px;
    width:4px;
    height:10px;
    background:black;
}
.hour {
    width:8px;
    height:60px;
    border-radius:4px;
    position:absolute;
    left:96px;
    top:40px;
    background-color:black;
    transform-origin: center 60px;
    box-shadow:0 0 10px rgba(0,0,0,0.8);
}
.min {
    width:6px;
    height:70px;
    border-radius:3px;
    position:absolute;
    left:97px;
    top:30px;
    background-color:#2b2b2b;
    transform-origin: center 70px;
    box-shadow:0 0 10px rgba(0,0,0,0.6);
}
.sec {
    width:4px;
    height:80px;
    border-radius:2px;
    position:absolute;
    left:98px;
    top:20px;
    background-color:red;
    transform-origin: center 80px;
    box-shadow:0 0 10px rgba(255,0,0,0.5);
}
.center {
    width:16px;
    height:16px;
    box-shadow:0 2px 5px rgba(0,0,0,0.5);
    border-radius:50%;
    position:absolute;
    left:92px;
    top:92px;
    background-image: radial-gradient(white,gray);
}
</style>
</head>
<body>    
　　<p class="clock">        
　　　　<ul id="tickBox">        
　　　　</ul>        
　　　　<p class="hour" id="hour"></p>        
　　　　<p class="min" id="min"></p>        
　　　　<p class="sec" id="sec"></p>        
　　　　<p class="center"></p>    
　　</p>    
　　<script>        
　　　　window.onload = function(){            
　　　　　　var oUl = document.getElementById("tickBox");            
　　　　　　var oStyle = document.getElementById("style");            
　　　　　　var liStr = "";            
　　　　　　var styleStr = "";            
　　　　　　for(var i=0;i<60;i++){                
　　　　　　　　styleStr += '.clock ul li:nth-of-type('+(i+1)+'){transform: rotate('+i*6+'deg);}';                
　　　　　　　　liStr += '<li></li>';           
 　　　　　　}           
　　　　　　 oStyle.innerHTML += styleStr;            
　　　　　　oUl.innerHTML = liStr;            
　　　　　　var oHour = document.getElementById("hour");            
　　　　　　var oMin = document.getElementById("min");            
　　　　　　var oSec = document.getElementById("sec");            
　　　　　　function getTime(){                
　　　　　　　　var timer = new Date();                
　　　　　　　　var sec = timer.getSeconds();                
　　　　　　　　var min = timer.getMinutes();                
　　　　　　　　var hour = timer.getHours();               
 　　　　　　　 var tranS = sec*360/60;                
　　　　　　　　var tranM = (min+sec/60)*360/60;                
　　　　　　　　var tranH = (hour + min/60)*360/12;                
　　　　　　　　oSec.style.transform = 'rotate('+tranS+'deg) translateZ(-1px)';               
　　　　　　　　oMin.style.transform = 'rotate('+tranM+'deg) translateZ(-1px)';               
 　　　　　　　 oHour.style.transform = 'rotate('+tranH+'deg) translateZ(-1px)';            
　　　　　　　}           
 　　　　　　setInterval(getTime,1000);            
　　　　　　 getTime();        
　　　　}    
　　</script>
</body>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More