CSS 底部發光特效可以為網頁增添一份神秘與夢幻。以下是實現這一特效的代碼示例:
.footer { background: linear-gradient(to right, #ff00ff, #00ffff); position: relative; } .footer::before { content: ""; position: absolute; bottom: -10px; left: 0; right: 0; height: 20px; background: linear-gradient(to right, transparent, #ff00ff, #00ffff, transparent); transform: skewY(-4deg); opacity: 0.6; filter: blur(20px); z-index: -1; }
以上代碼可以將底部容器(class為 ".footer")從左到右漸變為紫色與青色的線性漸變,而 "::before" 偽元素用于實現發光效果。其中,bottom 屬性將元素下移 10px ,并讓 ::before 元素覆蓋在其上方。
left 與 right 屬性將 ::before 寬度設置為與底部容器一致,height 屬性設置高度為 20px。background 屬性設置顏色線性漸變,gradual stops 與底部容器顏色保持一致,但為了讓發光部分更加明顯,加入了透明度過渡。
transform: skewY(-4deg) 屬性將 ::before 傾斜,opacity 屬性設置不透明度為 0.6,filter: blur(20px) 屬性讓其發生模糊效果,營造出神秘與不真實感,最后,z-index: -1 讓 ::before 位于底部容器下面。
以上代碼可以為網頁增添一份特殊的視覺效果,更有效地吸引用戶注意力。
上一篇html盒子代碼案例
下一篇css 常用選擇符