在CSS中,我們可以使用動畫效果來讓網頁更加生動有趣。其中一種常用的動畫效果就是色塊移動。通過改變屬性值來讓色塊移動,達到動態效果。
/* CSS代碼 */ div { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0; animation: move 2s linear infinite; } @keyframes move { from { left: 0; } to { left: 100%; } }
上面的代碼中,我們給一個div聲明樣式,并使用position屬性來將其定位。接著,我們使用animation屬性來聲明動畫效果。其中,move為動畫名稱,2s為動畫執行時間,linear表示動畫速度勻速,infinite表示無限循環。
而在@keyframes規則中,我們可以定義動畫的關鍵幀。在這個例子中,我們定義了兩個關鍵幀,分別是from和to。from表示動畫開始時的狀態,to則表示動畫結束時的狀態。在這里,我們將色塊的left值由0變化到100%,實現了從左向右移動的效果。
通過這種方式,我們可以實現各種各樣的動畫效果,為網頁增添生動有趣的元素。
上一篇css色斑