CSS是指層疊樣式表(Cascading Style Sheets)的縮寫,它是一種用于描述文檔在屏幕、紙張或其他設(shè)備上如何呈現(xiàn)的樣式語言。其中,使用CSS可以實現(xiàn)許多有趣的效果,比如讓光盤旋轉(zhuǎn)。
<code> .disc { width: 200px; height: 200px; background: url(光盤的圖片地址) no-repeat; } .disc:hover { animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } </code>
如上所示的代碼中,我們首先創(chuàng)建了一個光盤的樣式,把圖片作為背景來實現(xiàn)。并且我們用:hover偽類來實現(xiàn)鼠標懸停效果,通過animation動畫,實現(xiàn)光盤在鼠標懸停時旋轉(zhuǎn)。最后,我們通過@keyframes關(guān)鍵字設(shè)置旋轉(zhuǎn)動畫的初始角度和結(jié)束角度。
通過這樣簡單的實現(xiàn),我們就能在網(wǎng)頁上創(chuàng)建一個酷炫的光盤旋轉(zhuǎn)效果,讓網(wǎng)頁更加生動有趣。
上一篇div 圓形邊框