CSS是指層疊樣式表(Cascading Style Sheets)的縮寫,它是一種用于描述文檔在屏幕、紙張或其他設備上如何呈現的樣式語言。其中,使用CSS可以實現許多有趣的效果,比如讓光盤旋轉。
<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>
如上所示的代碼中,我們首先創建了一個光盤的樣式,把圖片作為背景來實現。并且我們用:hover偽類來實現鼠標懸停效果,通過animation動畫,實現光盤在鼠標懸停時旋轉。最后,我們通過@keyframes關鍵字設置旋轉動畫的初始角度和結束角度。
通過這樣簡單的實現,我們就能在網頁上創建一個酷炫的光盤旋轉效果,讓網頁更加生動有趣。
上一篇div 圓形邊框
下一篇css實現人走路效果