小猿圈自學web前端之CSS3動畫練習案例：用CSS3作個鐘錶

前段時間發的五子棋的遊戲不少小夥伴都私聊讓再作個，今天小猿圈web前端講師爲你們分享的是CSS3動畫練習案例：用CSS3作個鐘錶，想玩的小夥伴記得本身運行一下呦。

自學CSS3屬性以後，咱們來用一個小案例進行一個綜合練習，這個案例主要是動畫的應用，咱們就用純css動畫作一個能走字的鐘表。

首先咱們來準備HTML來佈局一下：

佈局很簡單，六根直線經過旋轉必定角度作刻度一箇中間小圓點，一個遮罩來蓋住六根直線的中間部分，使直線變成刻度，後面三個是時分秒針。

下面經過CSS把鐘錶的大概樣子設置出來。

.clock { /* 建立圓形盒子當作錶盤 / width: 200px; height: 200px; margin: 100px auto; position: relative; border: 10px solid #000; border-radius: 50%; } .clock div:nth-child(-n+6) { / 選中前6個子元素作出6條線當作表的刻度 / width: 6px; height: 200px; background-color: #aaa; position: absolute; left: 50%; margin-left:-3px; } / 讓6條線遞增旋轉30度 */ .clock div:nth-child(1) { transform: rotate(30deg); } .clock div:nth-child(2) { transform: rotate(60deg); } .clock div:nth-child(3) { transform: rotate(90deg); background-color: #333; } .clock div:nth-child(4) { transform: rotate(120deg); } .clock div:nth-child(5) { transform: rotate(150deg); } .clock div:nth-child(6) { transform: rotate(0deg); background-color: #333; }

/* 中心小圓點 / .cent { width: 20px; height: 20px; background-color: #000; border-radius: 50%; position:absolute; z-index: 3; left: 50%; top:50%; margin: -10px 0 0 -10px; z-index:2; } / 遮住線的中間部分，讓線成爲刻度 */ .cover { width: 180px; height: 180px; border-radius: 50%; background-color: #fff; position:absolute; left: 50%; top:50%; margin:-90px 0 0 -90px; } 後面加上中心圓點和遮罩，讓它看起來像個錶盤。

接下來咱們就能夠準備錶針和動畫了。

/* 時針製做 / .hour { width: 6px; height: 50px; background-color: #000; position:absolute; left: 50%; top:100px; margin-left: -3px; animation: clockrotate 43200s steps(43200) infinite linear; transform-origin: top center; } / 分針製做 / .minute { width: 60px; height: 6px; background-color: #555; position:absolute; left:40px; top:50%; margin-top: -3px; animation: clockrotate 3600s steps(3600) infinite; transform-origin: center right; } / 秒針製做 / .seconds { width: 4px; height: 70px; background-color:red; position: absolute; left:50%; top:30px; margin-left: -2px; animation: clockrotate 60s steps(60) infinite ; transform-origin: bottom center; } / 設置動畫序列 */ @keyframes clockrotate { form{

}
        to {
            transform: rotate(360deg);
        }
    }
複製代碼

設置每一個針的動畫是旋轉360度，根據時、分、秒來計算動畫執行完畢須要的時間和步數，加個infinite無限執行，另外還要注意錶針旋轉的中心點設置。

上述就是小猿圈老師針對CSS3動畫練習案例：用CSS3作個鐘錶介紹，相信你對web前端也是有必定的瞭解的，若是遇到不會的問題能夠到小猿圈去尋找答案的，裏面有最新最全面的視頻教程等你來學習，只要你想學習編程這裏都有。