CSS 劃過旋轉(zhuǎn)是 web 開發(fā)中的一種很酷炫的效果。
在這種效果中,當(dāng)鼠標(biāo)懸停在一個元素上時,該元素將以旋轉(zhuǎn)的形式展示出來。
/* HTML */ <div class="rotate"> <span>Hover me</span> </div> /* CSS */ .rotate { width: 100px; height: 100px; background-color: yellowgreen; transition: transform 0.5s; display: flex; align-items: center; justify-content: center; } .rotate:hover { transform: rotate(360deg); } .rotate span { font-family: Arial, sans-serif; font-size: 20px; font-weight: bold; color: white; }
在以上代碼中,我們首先創(chuàng)建一個 div 元素,并將其添加一個 span 元素。我們使用 CSS 中的 transform 屬性,通過其 rotate() 函數(shù),讓 div 元素在鼠標(biāo)懸停時旋轉(zhuǎn) 360 度。
在這個例子中,我們還為旋轉(zhuǎn)效果添加了一個過渡時間,以使它看起來更加平滑。
最后,我們還設(shè)置了一些基本的樣式,例如背景顏色和字體樣式,以便使 div 元素更加易讀。
總體來說,CSS 劃過旋轉(zhuǎn)效果非常簡單而又酷炫,可以用于各種 web 應(yīng)用程序中,增加一些額外的動態(tài)效果。