CSS3 漸變發光是一個非常流行的效果,它用于創建一個看起來非常復雜的光線效果。這個效果可能聽起來很難,但是通過基本的 CSS3 漸變屬性,它可以很容易地實現。
.box { background: linear-gradient(135deg, #fff 0%, #fff 45%, #ffcc8b 45%, #ffcc8b 55%, #fff 55%); box-shadow: 0 0 15px 5px rgba(255, 204, 139, 0.8); }
在這里,我們把一個線性漸變和一個發光效果結合在了一起。通過漸變的方式,我們實現了一種帶有色彩豐富的光線效果。在 box-shadow 中,我們定義了一個半透明的陰影背景,使得光線看上去更加明亮。
除了使用線性漸變外,我們還可以使用徑向漸變。它可以通過 radial-gradient 簡單地定義。例如:
.box { background: radial-gradient(circle at center, rgba(250, 255, 0, 0.5) 8%, rgba(250, 255, 0, 0.3) 24%, rgba(250, 255, 0, 0.0) 77% ); box-shadow: 0 0 15px 5px rgba(255, 204, 139, 0.8); }
在這個例子中,我們創建了一個“高亮點”,并將它放置在居中位置,使用了一個徑向漸變。隨著半徑逐漸增大,光線變得透明。
無論你是使用線性還是徑向漸變,CSS3 漸變發光都是相當易于使用的。它會幫助你創造一個看起來很復雜的效果,并使你的網站更加生動有趣。
上一篇css3 橫向瀑布流