CSS是一種用來設置HTML頁面樣式的語言,它可以為我們的網頁添加各種各樣的樣式和動態效果。想要設置動態樣式,我們可以通過以下兩種方法來實現:
1.使用transition屬性
.box { width: 100px; height: 100px; background-color: blue; transition: width 1s, height 1s; } .box:hover { width: 200px; height: 200px; }
這里定義了一個名為box的DIV,當鼠標懸浮在DIV上時,它的寬高會從100px變為200px,同時會有一個1秒鐘的動畫效果。這是通過設置transition屬性來實現的,它可以指定在哪些CSS屬性值發生改變時觸發動畫效果,以及動畫持續的時間。
2.使用@keyframes規則
.box { width: 100px; height: 100px; background-color: blue; animation: mymove 2s infinite; } @keyframes mymove { from {top: 0px;} to {top: 200px;} }
這里同樣定義了一個名為box的DIV,但是我們通過@keyframes規則來定義了一個名為mymove的動畫,動畫中的元素從top:0px到top:200px的位置移動,并且動畫持續時間為2秒鐘,無限循環。最后通過animation屬性將動畫應用到DIV上。
總之,這兩種方法都可以幫助我們為網頁添加各種動態效果,讓我們的頁面更加生動有趣。