CSS帶燈光的標簽是一種使用CSS技術實現的亮起來效果的標簽。它可以讓網頁中的元素在鼠標交互時產生亮起來的效果,增加網頁的視覺效果。下面是一個示例:
<div class="lightUp"> <p>這是一個被點亮的區域</p> </div>
在上面的代碼中,我們使用了一個 <div> 元素來包裹要被點亮的區域。同時添加了一個名為 "lightUp" 的類。接下來,我們可以使用CSS樣式來設置這個 "lightUp" 類的特殊效果:
.lightUp { position: relative; } .lightUp:before { content: ""; display: block; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: rgba(255, 255, 255, 0.2); z-index: 999; opacity: 0; transition: opacity 0.3s ease-out; } .lightUp:hover:before { opacity: 1; }
上面的代碼設置了一個名為 ".lightUp" 的類,使它的位置為相對定位。接下來,我們使用 ":before" 偽元素來創建一個覆蓋在 ".lightUp" 元素外面的另一層元素。 ":before" 元素的寬度和高度都設置為超過 ".lightUp" 元素的大小,從而形成了一個覆蓋全屏的圖層。同時,我們使用 rgba() 函數設置這個圖層的顏色,并設置其透明度為0。
接下來,我們使用 ":hover" 偽類來監聽鼠標懸停事件,在鼠標懸停時將 ":before" 元素的透明度從0變為1,從而使其顯示出來。由于我們設置了透明度的過渡效果,因此 &:hover:before 元素在透明度變化時會有平滑的過渡動畫效果。
至此,我們就成功地實現了帶有燈光效果的 ".lightUp" 元素標簽。我們可以在需要添加動態效果的元素上添加 "lightUp" 類,從而讓它們在鼠標懸停時呈現出亮起來的效果。
上一篇css帶字色塊