CSS3 光波是 CSS3 新增的一個特性,可以用來制作出類似太空艙的效果。此特性使用了 animation 和 radial-gradient 屬性來實現。
.box { background-image: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,0.4) 38%, rgba(255,255,255,0.4) 90%); animation: wave 5s linear infinite; } @keyframes wave { 0% { transform: translateX(-10%); opacity: 0; } 10% { opacity: 1; } 40% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
以上是一個簡單的 CSS3 光波效果的實現代碼。其中,box 類表示要使用此特效的元素,background-image 屬性設置背景漸變,animation 屬性設置了運動軌跡以及動畫時間等信息。
通過這種方式實現出來的效果具有視覺沖擊力,可以用在一些宣傳展示之類的場景中,讓網頁看起來更加生動。