利用CSS3的transform做的動態(tài)時鐘效果
我要評論目前這兩個屬性得到了主流瀏覽器IE，webkit，firefox，opera的支持，屬性名分別為-ms-transform -webkit-transform，-moz-transform，-o-transform。可能有人會疑問為什么要加各瀏覽器的前綴（-ms-）,本人認為可能在瀏覽器新版本發(fā)布時，此CSS屬性還沒有正式被W3組織當標準發(fā)布吧，所以加前綴加以區(qū)分，以后所有瀏覽器肯定會統(tǒng)一使用transform 和trandform-origin的。
最新CSS標準參考網(wǎng)站：http://www.w3.org/Style/CSS/current-work。
IE9開發(fā)人員指導(dǎo)網(wǎng)站：http://msdn.microsoft.com/en-us/ie/ff468705。
webkit開發(fā)資料：http://www.webkit.org/projects/documentation/index.html，http://developer.apple.com/devcenter/safari/index.action。
firefox開發(fā)資料：https://developer.mozilla.org/En/Developer_Guide。
opera開發(fā)資料：http://dev.opera.com/articles/view/wcl-developer-guide/。
transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時候起作用，它接受兩個參數(shù)，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,center,bottom等描述性參數(shù) ；它的默認值是50% 50%。
top left | left top 等價于 0 0；
top | top center | center top 等價于 50% 0
right top | top right 等價于 100% 0
left | left center | center left 等價于 0 50%
center | center center 等價于 50% 50%（默認值）
right | right center | center right 等價于 100% 50%
bottom left | left bottom 等價于 0 100%
bottom | bottom center | center bottom 等價于 50% 100%
bottom right | right bottom 等價于 100% 100%
transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動元素 ，他有幾個屬性值參數(shù)：
rotate(旋轉(zhuǎn))允許你通過傳遞一個度數(shù)值來轉(zhuǎn)動一個對象；
scale是一個縮放功能，可以讓任一元素變的更大。它使用一個或者兩個正數(shù)和負數(shù)以及小數(shù)作為參數(shù)；當使用一個參數(shù)時表示X軸和Y軸的縮放相同；
translate就是基于X和Y 坐標重新定位元素，當使用一個參數(shù)時表示X軸和Y軸的參數(shù)相同；
skew傾斜（ps中的斜切），參數(shù)是度數(shù)，當使用一個參數(shù)時表示X軸和Y軸的參數(shù)相同；
matrix矩陣變換，就是基于X和Y 坐標重新定位元素，它使用6個參數(shù)；
2.動態(tài)時鐘頁面的HTML + CSS
HTML 代碼：
<div id="clock">
<div id="dot"></div>
<div id="second" class="needle">
<div id="second_needle">
</div>
</div>
<div id="minute" class="needle">
<div id="minute_needle">
</div>
</div>
<div id="hour" class="needle">
<div id="hour_needle">
</div>
</div>
</div>
代碼中各個DIV的含義就不解釋了，相信大家都看得懂。HTML還是挺簡單的，起作用的還得看CSS。
相關(guān)CSS代碼：
<style type="text/css">
#clock{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
position:relative;
margin:0 auto;
background-color:#eee;
}
#dot{
border-radius:2px;
width: 8px;
height: 8px;
position:absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
background: black;
}
.needle
{
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin:50% 100%;
}
#second{
position:relative;
z-index:5;
height: 80px;
width: 1px;
margin: 20px auto;
}
#second_needle{
height: 100%;
width: 100%;
position: relative;
background: green;
}
#minute{
z-index:4;
height: 60px;
width: 4px;
position: absolute;
top: 40px;
left: 0px;
right: 0px;
margin: auto;
}
#minute_needle{
height: 100%;
width: 100%;
background: blue;
}
#hour{
z-index:3;
height: 40px;
width: 8px;
position: absolute;
top: 60px;
left: 0px;
right: 0px;
margin: auto;
}
#hour_needle{
height: 100%;
width: 100%;
background: red;
}
</style>
這里說明下幾個關(guān)鍵的CSS屬性：#clock 里面的塊元素的 position:absolute;然后再用top; bottom; margin; left; right; 才能準確定位，各個指鐘的旋轉(zhuǎn)原點為底部的中點：transform-origin:50% 100%;
3.頁面的Javascript的實現(xiàn)
最為關(guān)鍵的是JS代碼了：
<script type="text/javascript">
//初始化各指鐘的位置
window.onload = function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
minuteDeg,
hour = date.getHours(),
hourDeg;
var secondrotate = 'rotate('+second*6+'deg)';
var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate;
//對?于úwebkit的?瀏ˉ覽à器÷,要a這a樣ù定¨義?
document.getElementById('second').style.cssText = scss;
document.getElementById('second').style.webkitTransform = secondrotate;
minuteDeg = minute*6 + second*6/60;
var minuterotate = 'rotate('+minuteDeg+'deg)';
var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ;
document.getElementById('minute').style.cssText = minutecss;
document.getElementById('minute').style.webkitTransform = minuterotate; //對?于úwebkit的?瀏ˉ覽à器÷,要a這a樣ù定¨義?
if(hour>12){
hour = hour -12;
}
hourDeg = hour * 30 + minute*30/60;
var hourtrotate = 'rotate('+hourDeg+'deg)';
var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate;
document.getElementById('hour').style.cssText = hcss;
document.getElementById('hour').style.webkitTransform = hourtrotate; //對?于úwebkit的?瀏ˉ覽à器÷,要a這a樣ù定¨義?
};
//周ü期ú性?改?變?秒?鐘ó的?位?置?
setInterval(function(){
var date = new Date(),
second = date.getSeconds();
var secondrotate = 'rotate('+second*6+'deg)';
var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate ;
document.getElementById('second').style.cssText = scss;
document.getElementById('second').style.webkitTransform = secondrotate; //對?于úwebkit的?瀏ˉ覽à器÷,要a這a樣ù定¨義?
},1000)
//周ü期ú性?改?變?分?鐘ó的?位?置?
setInterval(function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
minuteDeg;
minuteDeg = minute*6 + second*6/60;
var minuterotate = 'rotate('+minuteDeg+'deg)';
var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ;
document.getElementById('minute').style.cssText = minutecss;
document.getElementById('minute').style.webkitTransform = minuterotate; //對?于úwebkit的?瀏ˉ覽à器÷,要a這a樣ù定¨義?
},6000)
//周ü期ú性?改?變?時±鐘ó的?位?置?
setInterval(function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
hour = date.getHours(),
hourDeg;
if(hour>12){
hour = hour -12;
}
hourDeg = hour * 30 + minute*30/60;
var hourtrotate = 'rotate('+hourDeg+'deg)';
var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate;
document.getElementById('hour').style.cssText = hcss;
document.getElementById('hour').style.webkitTransform = hourtrotate; //對?于úwebkit的?瀏ˉ覽à器÷,要a這a樣ù定¨義?
},360000)
</script>
請在支持CSS3的瀏覽器中查看,如:firefox, Chrome….,但IE9看不到效果,本地單獨運行頁面能看到效果
相關(guān)文章
- 本文譯自O(shè)ld School Clock with CSS3 and jQuery，主要講述了如何利用CSS3和jQuery制作一個漂亮的動態(tài)時鐘2012-05-10
jquery+CSS3實現(xiàn)的數(shù)字時鐘效果源碼
這是一款基于jquery+CSS3實現(xiàn)的數(shù)字時鐘效果源碼，可實現(xiàn)年月日及具體時間的顯示，還可以讀取并實時顯示本地時間。并且在秒數(shù)的顯示上有閃動的效果2014-10-20
基于jQuery/CSS3實現(xiàn)的線性時鐘插件源碼
這是一款jQuery時鐘插件，它非常有特點，即不是數(shù)字時鐘，也不是圓盤時鐘，而是基于線性的時鐘。其制作思想是把圓形的時鐘刻度展開成直線，把時針分針和秒針也變成可以滑動2014-07-01
這是一款超酷的純CSS3實現(xiàn)的圓盤時鐘動畫效果，這款時鐘動畫在初始化的時候就有動畫特效，包括圓盤的形成，以及時鐘指針的形成，都賦予了極為炫酷的動畫色彩。2014-06-20
jQuery+CSS3實現(xiàn)的一款超酷數(shù)字時鐘翻頁動畫
一款數(shù)字時鐘，時間每過一秒，相應(yīng)的位置就會像翻日歷一樣翻過去2014-05-04
一款完全利用CSS3實現(xiàn)鐘表，不是用任何的圖片和第三方的工具2014-04-14
css3實現(xiàn)燈光高亮?xí)r鐘效果無任何js代碼
一款純css3實現(xiàn)的，沒有任何js代碼的時鐘特效2014-03-05
一款比較簡潔的指針時鐘，所以想看準確的時間，請用chrome瀏覽器打開2014-02-20
一款SVG圖標+CSS3實現(xiàn)的鬧鐘特效代碼2013-12-20
今天我們來分享一款風(fēng)格獨特的時鐘特效源碼，這款CSS3時鐘動畫是一款數(shù)字時鐘，時間每過一秒，相應(yīng)的位置就會像翻日歷一樣翻過去。另外，這款CSS3數(shù)字時鐘有點立體的效果，2014-11-22
