CSS動畫可以制作出各種不同的動態效果,其中連續動作也是比較常見的一種。
首先,我們可以使用關鍵幀動畫來制作連續動作。關鍵幀動畫是通過設置多個關鍵幀,每個關鍵幀設置不同的樣式,然后由瀏覽器自動計算中間過渡狀態,形成連續的動畫效果。
/* 設置關鍵幀,實現一個小球從左邊移動到右邊 */ @keyframes moveRight { 0% { left: 0; } 100% { left: 100%; } } /* 使用關鍵幀動畫實現小球移動 */ .ball { position: absolute; left: 0; top: 50%; margin-top: -25px; width: 50px; height: 50px; background-color: red; animation-name: moveRight; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
在上面的代碼中,我們首先定義了一個名為moveRight的關鍵幀動畫,其中設置了小球的樣式從left:0變為left:100%。然后在小球的樣式中,我們指定了使用moveRight動畫,動畫時長為2s,迭代次數為infinite表示無限次循環,緩動函數使用ease-out。
除了使用關鍵幀動畫,我們還可以使用transition過渡動畫來實現連續動作。過渡動畫可以在鼠標懸?;蚰承邮阶兓臅r候觸發,使元素平滑地過渡到新的樣式。
/* 使用過渡動畫實現按鈕懸浮變色 */ .button { display: inline-block; padding: 10px 20px; font-size: 16px; background-color: #0078d7; color: #fff; transition: background-color 0.2s ease-out; } .button:hover { background-color: #106ebe; }
在上面的代碼中,我們先定義了一個樣式為.button的按鈕,設置了初始的背景顏色為#0078d7。然后在.button:hover樣式中,我們指定了鼠標懸浮時的背景顏色為#106ebe,并且指定了過渡效果的時長為0.2s,緩動函數為ease-out。
總的來說,通過使用關鍵幀動畫和過渡動畫,我們可以輕松地制作出各種連續動作的效果,為網頁增添生動活潑的氣息。
上一篇css怎么加虛線框