九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
優(yōu)雅WEB：三步制作CSS3扁平化小時鐘
 本帖最后由 輕微生活網(wǎng) 于 2016-3-18 10:23 編輯

本碼農(nóng)長期浸淫于Dribbble等設(shè)計師網(wǎng)站，看到那些好看的設(shè)計作品就非常激動，但是無奈PS不精通，AI也早忘光了，只不過對前端略有研究，偶然間看到幾個設(shè)計清爽的時鐘，覺得用CSS實現(xiàn)起來應(yīng)該也沒什么難度，于是花了個把鐘頭琢磨了一個出來。
效果圖


DEMO


技術(shù)點
  • box-shadow 表盤的質(zhì)感什么的全靠它了
  • nth-child(x) 用于表盤刻度的定位什么的
  • transform-origin 這個用來定位三個表針旋轉(zhuǎn)的中心點
  • keyframes 表針動畫效果
流程
先設(shè)計好DOM結(jié)構(gòu)，代碼如下：
  1. <div class="clock-wrapper">
  2.     <div class="clock-base">
  3.         <div class="click-indicator">
  4.             <div></div>
  5.             <div></div>
  6.             <div></div>
  7.             <div></div>
  8.             <div></div>
  9.             <div></div>
  10.             <div></div>
  11.             <div></div>
  12.             <div></div>
  13.             <div></div>
  14.             <div></div>
  15.             <div></div>
  16.         </div>
  17.         <div class="clock-hour"></div>
  18.         <div class="clock-minute"></div>
  19.         <div class="clock-second"></div>
  20.         <div class="clock-center"></div>
  21.     </div>
  22. </div>
復(fù)制代碼

結(jié)構(gòu)很簡單，從樣式名可以看出來每個元素的用處，中間那段空div自然就是表盤刻度了。
接下來是CSS代碼
  1. html,body{
  2.     height: 100%;
  3.     margin: 0;
  4.     padding: 0;
  5.     background-image: linear-gradient(#e7e7e7,#d7d7d7);
  6. }
  7. /*時鐘容器*/
  8. .clock-wrapper{
  9.     position: absolute;
  10.     top: 0;
  11.     right: 0;
  12.     bottom: 100px;
  13.     left: 0;
  14.     width: 250px;
  15.     height: 250px;
  16.     margin: auto;
  17.     padding: 5px;
  18.     background-image: linear-gradient(#f7f7f7,#e0e0e0);
  19.     border-radius: 50%;
  20.     box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);

  22. }
  23. /*表盤*/
  24. .clock-base{
  25.     width: 250px;
  26.     height: 250px;
  27.     background-color: #eee;
  28.     border-radius: 50%;
  29.     box-shadow: 0 0 5px #eee;
  30. }
  31. /*表盤刻度容器*/
  32. .click-indicator{
  33.     position: absolute;
  34.     z-index: 1;
  35.     top: 15px;
  36.     left: 15px;
  37.     width: 230px;
  38.     height: 230px;
  39. }
  40. /*表盤刻度*/
  41. .click-indicator div{
  42.     position: absolute;
  43.     width: 2px;
  44.     height: 4px;
  45.     margin: 113px 114px;
  46.     background-color: #ddd;
  47. }
  48. /*分別設(shè)置各個刻度的位置和角度*/
  49. .click-indicator div:nth-child(1) {
  50.     transform: rotate(30deg) translateY(-113px);
  51. }
  52. .click-indicator div:nth-child(2) {
  53.     transform: rotate(60deg) translateY(-113px);
  54. }
  55. .click-indicator div:nth-child(3) {
  56.     transform: rotate(90deg) translateY(-113px);
  57.     background-color: #aaa;
  58. }
  59. .click-indicator div:nth-child(4) {
  60.     transform: rotate(120deg) translateY(-113px);
  61. }
  62. .click-indicator div:nth-child(5) {
  63.     transform: rotate(150deg) translateY(-113px);
  64. }
  65. .click-indicator div:nth-child(6) {
  66.     transform: rotate(180deg) translateY(-113px);
  67.     background-color: #aaa;
  68. }
  69. .click-indicator div:nth-child(7) {
  70.     transform: rotate(210deg) translateY(-113px);
  71. }
  72. .click-indicator div:nth-child(8) {
  73.     transform: rotate(240deg) translateY(-113px);
  74. }
  75. .click-indicator div:nth-child(9) {
  76.     transform: rotate(270deg) translateY(-113px);
  77.     background-color: #aaa;
  78. }
  79. .click-indicator div:nth-child(10) {
  80.     transform: rotate(300deg) translateY(-113px);
  81. }
  82. .click-indicator div:nth-child(11) {
  83.     transform: rotate(330deg) translateY(-113px);
  84. }
  85. .click-indicator div:nth-child(12) {
  86.     transform: rotate(360deg) translateY(-113px);
  87.     background-color: #c00;
  88. }
  89. /*時針*/
  90. .clock-hour{
  91.     position: absolute;
  92.     z-index: 2;
  93.     top: 80px;
  94.     left: 128px;
  95.     width: 4px;
  96.     height: 65px;
  97.     background-color: #555;
  98.     border-radius: 2px;
  99.     box-shadow: 0 0 2px rgba(0,0,0,.2);
  100.     transform-origin: 2px 50px;
  101.     transition: .5s;
  102.     -webkit-animation: rotate-hour 43200s linear infinite;
  103. }
  104. /*分針*/
  105. .clock-minute{
  106.     position: absolute;
  107.     z-index: 3;
  108.     top: 60px;
  109.     left: 128px;
  110.     width: 4px;
  111.     height: 85px;
  112.     background-color: #555;
  113.     border-radius: 2px;
  114.     box-shadow: 0 0 2px rgba(0,0,0,.2);
  115.     transform-origin: 2px 70px;
  116.     transition: .5s;
  117.     -webkit-animation: rotate-minute 3600s linear infinite;
  118. }
  119. /*秒針*/
  120. .clock-second{
  121.     position: absolute;
  122.     z-index: 4;
  123.     top: 20px;
  124.     left: 129px;
  125.     width: 2px;
  126.     height: 130px;
  127.     background-color: #a00;
  128.     box-shadow: 0 0 2px rgba(0,0,0,.2);
  129.     transform-origin: 1px 110px;
  130.     transition: .5s;
  131.     -webkit-animation: rotate-second 60s linear infinite;
  132. }
  133. .clock-second:after{
  134.     content: "";
  135.     display: block;
  136.     position: absolute;
  137.     left: -5px;
  138.     bottom: 14px;
  139.     width: 8px;
  140.     height: 8px;
  141.     background-color: #a00;
  142.     border: solid 2px #a00;
  143.     border-radius: 50%;
  144.     box-shadow: 0 0 3px rgba(0,0,0,.2);
  145. }
  146. /*表盤中央的原型區(qū)域*/
  147. .clock-center{
  148.     position: absolute;
  149.     z-index: 1;
  150.     width: 150px;
  151.     height: 150px;
  152.     top: 55px;
  153.     left: 55px;
  154.     background-image: linear-gradient(#e3e3e3,#f7f7f7);
  155.     border-radius: 50%;
  156.     box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
  157. }
  158. .clock-center:after{
  159.     content: "";
  160.     display: block;
  161.     width: 20px;
  162.     height: 20px;
  163.     margin: 65px;
  164.     background-color: #ddd;
  165.     border-radius: 50%;
  166. }
復(fù)制代碼

樣式文件就這些，不過這樣的話三個指針都是在12點的，接下來需要讓指針動起來。
其實簡單點的話直接在css里面定好動畫規(guī)則就行了:時針43200秒旋轉(zhuǎn)360度，分針秒針以此類推。
但是強迫癥表示這樣堅決不行，連正確的時間都不能指示的時鐘肯定是山寨品，所以這里需要找CSS的好兄弟JavaScript借下力了：
  1. (function(){

  3.     //generate clock animations
  4.     var now       = new Date(),
  5.         hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
  6.         minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
  7.         secondDeg = now.getSeconds() / 60 * 360,
  8.         stylesDeg = [
  9.             "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
  10.             "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
  11.             "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
  12.         ].join("");

  14.     document.getElementById("clock-animations").innerHTML = stylesDeg;

  16. })();
復(fù)制代碼

哦，千萬別忘了在head標(biāo)簽里面放點東西：
  1. <style id="clock-animations"></style>
復(fù)制代碼

不然JS生成的樣式代碼沒地方安身啊。

教程來源：
HTML+CSS3再加一點點JS做的一個小時鐘 - 優(yōu)雅的Web - SegmentFault  https://segmentfault.com/a/1190000003055672
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
css3元素如何扭曲、移位或旋轉(zhuǎn)
讓等待變爽快!用CSS3創(chuàng)建預(yù)加載動畫集
純CSS3實現(xiàn)各種表情動畫
html5和css3制作不規(guī)則的網(wǎng)頁背景分割線
CSS動畫實例：一顆躁動的心
CSS3——2D變形(CSS3) transform
更多類似文章 >>
生活服務(wù)
熱點新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服