CSS3是一種前端開發技術,可以為網站帶來更豐富的樣式效果,其中包括一束光閃過的特效。
.light { position: relative; display: inline-block; } .light:hover:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 30px 30px #fff, 0 0 40px 40px #ff9, 0 0 50px 50px orange; opacity: 0; animation: light 1s linear infinite; } @keyframes light { 0% { opacity: 1; } 100% { opacity: 0; } }
以上是一段CSS3代碼示例,實現了一束光閃過的特效。關鍵在于使用了偽元素:after和CSS動畫。
當鼠標懸停在含有.light類的元素上時,會出現一個圓形的光暈,由內向外縮小最終消失。這是通過設置偽元素的box-shadow屬性實現的。box-shadow的設置包含三個參數,分別代表向X軸方向平移、向Y軸方向平移和陰影模糊程度。這三個參數相互疊加,形成了一種在視覺上產生放射紋的效果。
在這段代碼中,偽元素的大小、位置、邊框圓角都被設置為100%,使其完全覆蓋了原有元素。然后,該元素被設置為可動畫的,即定義了一個名為light的動畫,執行時間為1秒,線性緩動,無限循環。
在動畫中,偽元素的不透明度從1逐漸降低到0。當不透明度為0時,光暈消失。
上一篇css3 上下左右漸變
下一篇css3 下拉箭頭樣式