在Web開發中,有時我們需要讓某個元素持續不斷地變大、變小,這就需要使用CSS來實現。
使用CSS來設置元素的大小是很簡單的,我們只需要定義該元素的height和width屬性即可。但是如果我們需要讓元素持續地變大、變小,就需要結合CSS3中的動畫效果來實現。
.element { width: 100px; height: 100px; background-color: #ff0000; animation: changeSize 2s ease-in-out infinite alternate; } @keyframes changeSize { 0% { transform: scale(1); } 100% { transform: scale(1.5); } }
上面的代碼中,我們首先定義了一個名為“element”的CSS類,該類設置了元素的初始大小和背景顏色,并使用了animation屬性來啟用動畫效果。其中,changeSize是我們定義的動畫名稱,2s表示動畫的總時長,ease-in-out表示動畫的時間曲線,infinite表示動畫循環播放,alternate表示循環播放時交替正反播放。
接下來,我們在CSS文件中通過@keyframes關鍵字定義了動畫的細節。其中,0%表示動畫的開始時刻,也就是元素的初始狀態,transform: scale(1)表示元素不做任何縮放。100%則表示動畫結束時刻,也就是元素最終狀態,transform: scale(1.5)表示元素縮放到原來的1.5倍。
通過上述代碼,我們就實現了一個元素持續不斷地變大、變小的效果。
下一篇css標準盒模型坑