站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        利用html5制作一個(gè)時(shí)鐘動(dòng)畫效果

        利用html5制作一個(gè)時(shí)鐘動(dòng)畫效果

        我們先來看下效果圖(不考慮顏色搭配):

        (學(xué)習(xí)視頻分享:html5視頻教程)

        利用html5制作一個(gè)時(shí)鐘動(dòng)畫效果

        我們首先要理解如何去實(shí)現(xiàn)這個(gè)時(shí)鐘,暫時(shí)不要考慮動(dòng)畫,學(xué)著將問題進(jìn)行拆解,一步一步實(shí)現(xiàn)。

        首先我們需要畫個(gè)方形,有個(gè)邊框,給一個(gè)圓角就可以實(shí)現(xiàn)最外邊的圓環(huán)再通過一個(gè)長的矩形旋轉(zhuǎn)多個(gè)就可以實(shí)現(xiàn)刻度

        利用html5制作一個(gè)時(shí)鐘動(dòng)畫效果

        只要再畫一個(gè)白色圓面去覆蓋就可以實(shí)現(xiàn)標(biāo)準(zhǔn)的刻度

        利用html5制作一個(gè)時(shí)鐘動(dòng)畫效果

        最后再加上三個(gè)矩形和中間的小圓面就可以實(shí)現(xiàn)時(shí)鐘的初始狀態(tài)了

        代碼實(shí)現(xiàn)

        以上過程理解了之后,代碼實(shí)現(xiàn)就簡單多了,唯一需要考慮的就是代碼的優(yōu)化問題,以下為了簡單明了每一步是如何實(shí)現(xiàn),存在很多重復(fù)的代碼。

        關(guān)于動(dòng)畫,我們只需要設(shè)置旋轉(zhuǎn)動(dòng)畫就可以了,時(shí)分秒針的動(dòng)畫只需要改變不同的時(shí)間就可以了。

        具體細(xì)節(jié)注意見代碼:

        <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>時(shí)鐘</title>     <style>         *{             padding: 0;             margin: 0;         }         .clock{             width: 300px;             height: 300px;             border: 10px solid #ccc;             /*百分比參照的是實(shí)際寬高*/             border-radius: 50%;             margin: 20px auto;             position: relative;         }         .line{             width: 8px;             height: 300px;             background-color: #ccc;             position: absolute;               /*實(shí)現(xiàn)居中*/             /*參照父元素的寬*/             left: 50%;             top: 0;             /*參照元素本身*/             transform: translate(-50%,0);               /*保留,否則會(huì)被覆蓋*/             }         .line2{             transform: translate(-50%,0) rotate(30deg);         }         .line3{             transform: translate(-50%,0) rotate(60deg);         }         .line4{             transform: translate(-50%,0) rotate(90deg);         }         .line5{             transform: translate(-50%,0) rotate(120deg);         }         .line6{             transform: translate(-50%,0) rotate(150deg);         }           .cover{             width: 250px;             height: 250px;             border-radius: 50%;             background-color: #fff;             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%,-50%);         }         .hour{             width: 6px;             height: 80px;             background-color: red;             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%,-100%);               /*設(shè)置軸心*/             transform-origin: center bottom;             /*動(dòng)畫*/             -webkit-animation: move 43200s linear infinite;           }         .minute{             width: 4px;             height: 90px;             background-color: green;             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%,-100%);               /*設(shè)置軸心*/             transform-origin: center bottom;             /*動(dòng)畫*/             -webkit-animation: move 3600s linear infinite;             }         .second{             width: 2px;             height: 100px;             background-color: blue;             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%,-100%);               /*設(shè)置軸心*/             transform-origin: center bottom;             /*動(dòng)畫*/             -webkit-animation: move 60s infinite steps(60);             /*linear與step(60)重復(fù)*/           }         .center{             width:20px;             height:20px;             background-color: #ccc;             border-radius: 50%;             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%,-50%);           }           /*創(chuàng)建移動(dòng)動(dòng)畫*/         @keyframes move{             0%{                 transform: translate(-50%,-100%) rotate(0deg);             }             100%{                 transform: translate(-50%,-100%) rotate(360deg);             }           }     </style> </head> <body> <div>     <div class="line line1"></div>     <div class="line line2"></div>     <div class="line line3"></div>     <div class="line line4"></div>     <div class="line line5"></div>     <div class="line line6"></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div> </div> </body> </html>

        相關(guān)推薦:html5教程

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 欧美777精品久久久久网| 成人午夜精品网站在线观看 | 黄床大片免费30分钟国产精品| 无码日韩精品一区二区三区免费| 99精品视频在线观看婷| 99re6这里有精品热视频| 亚洲国产另类久久久精品| 精品福利一区二区三区精品国产第一国产综合精品 | 精品偷自拍另类在线观看丰满白嫩大屁股ass | 伊人 久久 精品| 久久精品亚洲精品国产欧美| 亚洲精品高清国产一久久| 国产AV午夜精品一区二区三区| 亚洲精品午夜无码专区| 久久精品99无色码中文字幕| 久久99精品国产一区二区三区| 久久精品国产亚洲av麻豆小说| 影院无码人妻精品一区二区| 精品欧美激情在线看| 国产高清在线精品一区二区 | 亚洲精品亚洲人成在线观看| 无码国内精品久久人妻麻豆按摩| 国产系列高清精品第一页| 亚洲国产精品国自产电影| 国产一区二区精品久久凹凸 | 日本熟妇亚洲欧美精品区| 精品无码专区亚洲| 亚洲精品美女久久久久99| 四虎国产精品永免费| 精品国产综合区久久久久久| 999国内精品永久免费观看 | 人妻精品久久久久中文字幕| 久久久精品波多野结衣| 精品水蜜桃久久久久久久| 久久精品成人欧美大片| 精品国产国产综合精品| 精品久久久久中文字| 久久精品国产亚洲Aⅴ蜜臀色欲| 久久久久无码精品| 天天爽夜夜爽夜夜爽精品视频| 日韩欧美亚洲国产精品字幕久久久 |