用html实现电子时钟
如何實現電子時鐘
###了解動畫
在實現電子時鐘前一定要了解動畫的基礎知識,這樣寫一個電子時鐘那就是水到渠成
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实现电子时钟的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 关于数据挖掘的something
- 下一篇: Axios 简单使用指南