CSS倒計時動畫效果是一種非常實用的效果,特別是在網頁中進行一些倒計時的操作時非常方便。在CSS中實現倒計時動畫效果有很多種方式,其中最常用的方式是通過使用transform屬性來實現。下面我們來看一段實現倒計時動畫效果的CSS代碼。
.clock { display: inline-block; font-size: 2em; font-weight: bold; text-align: center; margin: 0 10px; } .clock span { font-size: 0.3em; } .circle_animation { height: 80px; position: relative; width: 80px; } .circle_animation:after { border-radius: 50%; box-shadow: 0 3px 0 #ccc, 0 6px 0 #cecece, 0 9px 0 #ddd, 0 12px 0 #efefef, 0 15px 0 #f7f7f7; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .clock_timer { transform-origin: center; } .clock_timer-animation { animation-duration: 1s; animation-name: timer; animation-timing-function: steps(5); animation-iteration-count: infinite; } @keyframes timer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } 20% { transform: rotate(72deg); } 40% { transform: rotate(144deg); } 60% { transform: rotate(216deg); } 80% { transform: rotate(288deg); } }
這段CSS代碼實現了一個圓形倒計時動畫效果,其中通過使用transform-origin設置旋轉的基點,然后使用animation-name和@keyframes來控制動畫的執行過程。同時CSS中還使用了border-radius、box-shadow等屬性,這些屬性可以讓我們的倒計時效果更加豐富多彩。在這段CSS代碼中,我們使用了偽類:after來實現了一個圓形的基底,實現了一個類似鐘表的效果。
上一篇css 倒計時效果
下一篇css 修改文本顏色