CSS玻璃反光效果是一種非常炫酷的效果,它能夠為網站增添一份科技感和時尚感。以下是實現CSS玻璃反光效果的代碼:
.box { background: linear-gradient(0deg,rgba(255,255,255,0.15),rgba(255,255,255,0.15)),url(...); filter: blur(10px); position: relative; } .box::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: linear-gradient(45deg,rgba(255,255,255,0.2),rgba(255,255,255,0)),linear-gradient(-45deg,rgba(255,255,255,0.2),rgba(255,255,255,0)); background-size: 100% 100%; opacity: 0.5; z-index: -1; }
如上代碼所示,我們需要將背景設為一個線性漸變和一張圖片的混合,同時設置一個模糊濾鏡。接下來,我們需要添加一個偽元素,并設置其背景為兩個線性漸變之和,實現反光效果。
另外值得注意的一點是,這種效果在不同的屏幕尺寸下顯示效果可能不同,需要根據實際效果進行調整。
下一篇css現在時間代碼