如何實現電子時鐘

###了解動畫
在實現電子時鐘前一定要了解動畫的基礎知識，這樣寫一個電子時鐘那就是水到渠成
animation-name：；創建動畫名
@keyframes：創建動畫，創建關鍵幀
動畫內部使用百分比設置關鍵幀，每個關鍵幀中都要設置一個相同的樣式
@keyframes move{
0%{}動畫開始的狀態
100%{}動畫結束狀態
注意：初始狀態和結束狀態的屬性一定要保持一致，否則，不能實現動畫效果
}
animation-duration：；設置動畫的持續時間，單位：秒/s
animation-timing-function：；設置動畫放入速度類型
ease：默認值，逐漸減速
ease-in：加速
ease-out：減速
ease-in-out：先加速后減速
linear：勻速
animation-iteration-count：infinite；設置動畫的次數，默認值為none
值：number，添加次數
infinite：無限次
none：默認只執行一次
animation-direction：設置動畫的運動方向
normal：默認值，正常方向。
reverse：反方向
注意：以下兩個值動畫循環次數要多次才有效。
alternate：動畫先正常方向運動，再反方向運動
alternate-reverse：動畫先反方向運動，再正常方向運動
animation-fill-mode：forwards；保持動畫結束的狀態。
animation-delay：2s；設置動畫的延遲執行時間。
animation-play-state：；動畫的執行控件
running：播放動畫
paused：暫停動畫
animation：fc 2s linear infinite；
animation：動畫名，動畫持續時間，動畫的速度類型，動畫的次數

animation和transition的區別

animation屬性類似于transition，都屬于隨著時間改變元素的屬性值。
其主要的區別在于：transition需要觸發一個時間才會隨著時間而改變css屬性。
animation在不需要觸發事件的情況下，也會隨著時間而改變css樣式。
1.動畫不需要事件觸發，過渡需要。
2.過渡只有一組：開始的狀態和結束的狀態。
關鍵幀動畫：可以設置每一幀的動畫狀態，一般用于復雜的動畫效果。

實現電子時鐘的過程

寫電子時鐘的基本結構

<main><div class="hour"><span></span></div><div class="minute"><span></span></div><div class="second"><span></span></div><div class="point"></div></main>

寫電子時鐘的基本結構

body{margin: 0;overflow: hidden;}main{width: 800px;height: 800px;margin: 0 auto;background-image: url('images/clock.jpg');background-size: 100% 100%;background-position: 50% 50%;position: relative;}.hour{width: 10px;height: 400px;position: absolute;top: calc(50% - 200px);left: calc(50% - 5px);animation-name: rotates;animation-duration: 43200s;animation-timing-function: linear;animation-iteration-count: infinite;}.hour>span{display: inline-block;width: 10px;height: 220px;background-color:red;border-radius: 5px;z-index: -999;}.minute{width: 6px;height: 500px;position: absolute;top: calc(50% - 250px);left: calc(50% - 3px);animation-name: rotates;animation-duration: 3600s;animation-timing-function: linear;animation-iteration-count: infinite;}.minute>span{display: inline-block;width: 6px;height: 280px;background-color:green;border-radius: 3px;z-index: -999;}.second{width: 3px;height: 600px;position: absolute;top: calc(50% - 300px);left: calc(50% - 1.5px);animation-name: rotates;animation-duration: 60s;animation-timing-function: linear;animation-iteration-count: infinite;}.second>span{display: inline-block;width: 3px;height: 340px;background-color:blue;border-radius: 1.5px;z-index: -999;}.point{width: 30px;height: 30px;background-color: #000;border-radius: 50%;position: absolute;/* calc動態計算可以計算不同單位的值 */top: calc(50% - 15px);left:calc(50% - 15px);}@keyframes rotates {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}

這邊我用的是背景圖片，當然有興趣也可以自己寫一個

這是完成后的效果

總結

以上是生活随笔為你收集整理的用html实现电子时钟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。