CSS3鼠標滑動色塊是一種很有趣的效果,可以為網站增加一些交互感和視覺效果,下面是代碼實現:
<style> .box { width: 100px; height: 100px; background-color: #ccc; transition: all 0.5s; } .box:hover { background-color: #f00; } </style> <div class="box"></div>
上面的代碼中,box類是一個 div 元素的類,設置了寬和高以及背景顏色,同時還設置了一個過渡效果,這個過渡效果表示當背景顏色發生變化時,會有一個 0.5s 的過渡時間,讓漸變看起來更加自然。
當鼠標懸浮在 box 元素上時,box:hover 就會生效,這里我們將背景顏色變為 #f00,也就是紅色。
以上就是一個簡單的 CSS3 鼠標滑動色塊的實現方法,可以根據實際需求進行調整。