CSS3是一種用于網頁設計的樣式表語言,可以實現各種炫酷的效果。其中,寬度變大動畫是一種很流行的效果,下面我們來看一下具體實現。
/* 設置動畫效果 */ .animation { transition: width 1s; } /* 鼠標懸停時改變寬度 */ .animation:hover { width: 200px; }
如上代碼所示,我們先給目標元素設置一個CSS3動畫,這里使用transition屬性,它可以指定元素在不同狀態下的過渡效果。其中,width參數表示寬度的變化,1s表示變化的時間。
接下來,我們為目標元素添加:hover偽類選擇器,表示鼠標懸停時的狀態。在這個狀態下,我們指定目標元素的寬度變為200像素。
這樣,當鼠標懸停在目標元素上時,寬度就會緩慢地變為200像素,從而實現寬度變大動畫效果。
上一篇css3 vr h5