摘要:原文第一次發文章,比較激動。其實簡單點的話直接在里面定好動畫規則就行了時針秒旋轉度,分針秒針以此類推。好了,以上代碼我已經放在了上就這些了,獻個丑,各位輕拍
原文:http://margox.me/css3clock.html
第一次發文章,比較激動。
本碼農長期浸淫于Dribbble等設計師網站,看到那些好看的設計作品就非常激動,但是無奈PS不精通,AI也早忘光了,只不過對前端略有研究,偶然間看到幾個設計清爽的時鐘,覺得用CSS實現起來應該也沒什么難度,于是花了個把鐘頭琢磨了一個出來。
box-shadow 表盤的質感什么的全靠它了
nth-child(x) 用于表盤刻度的定位什么的
transform-origin 這個用來定位三個表針旋轉的中心點
keyframes 表針動畫效果
流程先設計好DOM結構,代碼如下:
結構很簡單,從樣式名可以看出來每個元素的用處,中間那段空div自然就是表盤刻度了。
接下來是CSS代碼
html,body{ height: 100%; margin: 0; padding: 0; background-image: linear-gradient(#e7e7e7,#d7d7d7); } /*時鐘容器*/ .clock-wrapper{ position: absolute; top: 0; right: 0; bottom: 100px; left: 0; width: 250px; height: 250px; margin: auto; padding: 5px; background-image: linear-gradient(#f7f7f7,#e0e0e0); border-radius: 50%; box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2); } /*表盤*/ .clock-base{ width: 250px; height: 250px; background-color: #eee; border-radius: 50%; box-shadow: 0 0 5px #eee; } /*表盤刻度容器*/ .click-indicator{ position: absolute; z-index: 1; top: 15px; left: 15px; width: 230px; height: 230px; } /*表盤刻度*/ .click-indicator div{ position: absolute; width: 2px; height: 4px; margin: 113px 114px; background-color: #ffffd; } /*分別設置各個刻度的位置和角度*/ .click-indicator div:nth-child(1) { transform: rotate(30deg) translateY(-113px); } .click-indicator div:nth-child(2) { transform: rotate(60deg) translateY(-113px); } .click-indicator div:nth-child(3) { transform: rotate(90deg) translateY(-113px); background-color: #aaa; } .click-indicator div:nth-child(4) { transform: rotate(120deg) translateY(-113px); } .click-indicator div:nth-child(5) { transform: rotate(150deg) translateY(-113px); } .click-indicator div:nth-child(6) { transform: rotate(180deg) translateY(-113px); background-color: #aaa; } .click-indicator div:nth-child(7) { transform: rotate(210deg) translateY(-113px); } .click-indicator div:nth-child(8) { transform: rotate(240deg) translateY(-113px); } .click-indicator div:nth-child(9) { transform: rotate(270deg) translateY(-113px); background-color: #aaa; } .click-indicator div:nth-child(10) { transform: rotate(300deg) translateY(-113px); } .click-indicator div:nth-child(11) { transform: rotate(330deg) translateY(-113px); } .click-indicator div:nth-child(12) { transform: rotate(360deg) translateY(-113px); background-color: #c00; } /*時針*/ .clock-hour{ position: absolute; z-index: 2; top: 80px; left: 128px; width: 4px; height: 65px; background-color: #555; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.2); transform-origin: 2px 50px; transition: .5s; -webkit-animation: rotate-hour 43200s linear infinite; } /*分針*/ .clock-minute{ position: absolute; z-index: 3; top: 60px; left: 128px; width: 4px; height: 85px; background-color: #555; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.2); transform-origin: 2px 70px; transition: .5s; -webkit-animation: rotate-minute 3600s linear infinite; } /*秒針*/ .clock-second{ position: absolute; z-index: 4; top: 20px; left: 129px; width: 2px; height: 130px; background-color: #a00; box-shadow: 0 0 2px rgba(0,0,0,.2); transform-origin: 1px 110px; transition: .5s; -webkit-animation: rotate-second 60s linear infinite; } .clock-second:after{ content: ""; display: block; position: absolute; left: -5px; bottom: 14px; width: 8px; height: 8px; background-color: #a00; border: solid 2px #a00; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,.2); } /*表盤中央的原型區域*/ .clock-center{ position: absolute; z-index: 1; width: 150px; height: 150px; top: 55px; left: 55px; background-image: linear-gradient(#e3e3e3,#f7f7f7); border-radius: 50%; box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3; } .clock-center:after{ content: ""; display: block; width: 20px; height: 20px; margin: 65px; background-color: #ffffd; border-radius: 50%; }
樣式文件就這些,不過這樣的話三個指針都是在12點的,接下來需要讓指針動起來。
其實簡單點的話直接在css里面定好動畫規則就行了:時針43200秒旋轉360度,分針秒針以此類推。
但是強迫癥表示這樣堅決不行,連正確的時間都不能指示的時鐘肯定是山寨品,所以這里需要找CSS的好兄弟JavaScript借下力了:
(function(){ //generate clock animations var now = new Date(), hourDeg = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30, minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6, secondDeg = now.getSeconds() / 60 * 360, stylesDeg = [ "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}", "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}", "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}" ].join(""); document.getElementById("clock-animations").innerHTML = stylesDeg; })();
哦,千萬別忘了在head標簽里面放點東西:
不然JS生成的樣式代碼沒地方安身啊。
好了,以上代碼我已經放在了jsbin上:
http://output.jsbin.com/xeraxe
就這些了,獻個丑,各位輕拍~ :)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49596.html
摘要:層疊即表示允許以多種方式來描述樣式,一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間,而不是立即生效。比如,將元素的顏色從白色改為黑色,通常這個改變是立即生效的,使用后,將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要:傳送門效果是這樣的結構小技巧就是,一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優化,就是在換擋的時候,動畫應該柔和些。 這次分享的電扇,和以往用css3畫人物相比 多加了一點交互,就是電扇開關的地方,用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。 GitHub傳送門:https://github.com/lancer07/css3_fan 效...
摘要:傳送門效果是這樣的結構小技巧就是,一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優化,就是在換擋的時候,動畫應該柔和些。 這次分享的電扇,和以往用css3畫人物相比 多加了一點交互,就是電扇開關的地方,用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。 GitHub傳送門:https://github.com/lancer07/css3_fan 效...
摘要:畢老師運營這明顯是廣告,但為什么要在這里發過去一段時間,由于團隊中的各種高富帥人生淫家都在全世界旅游,我們的開發進度比較慢當然之前也一直很慢,因為想要做一個慢產品。 Gradchef · 畢老師運營 這明顯是廣告,但為什么要在這里發? 過去一段時間,由于團隊中的各種高富帥、人生淫家都在全世界旅游,我們的開發進度比較慢(當然之前也一直很慢,因為想要做一個慢產品)。但是,我們一直都在堅...
閱讀 1123·2021-11-08 13:13
閱讀 1707·2019-08-30 15:55
閱讀 2762·2019-08-29 11:26
閱讀 2426·2019-08-26 13:56
閱讀 2549·2019-08-26 12:15
閱讀 2125·2019-08-26 11:41
閱讀 1394·2019-08-26 11:00
閱讀 1530·2019-08-23 18:30