CSS玻璃閃爍是網頁設計中常用的一種效果,它可以給網頁增加一個閃閃發光的特效,從而提高網頁的美觀度和視覺效果。下面我們來介紹CSS玻璃閃爍的實現方法。
.glass{ width: 200px; height: 200px; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.6); border-radius: 10px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); } .glass:before, .glass:after{ content: ""; position: absolute; background: rgba(255, 255, 255, 0.3); width: 60px; height: 60px; border-radius: 50%; top: -10px; left: 50%; transform: translate(-30px, 10px) rotate(45deg); animation: blink1 2s infinite ease-out; } .glass:after{ top: 50%; left: -10px; transform: translate(10px, -30px) rotate(45deg); animation: blink2 2s infinite ease-out; } @keyframes blink1{ 0%, 100%{ box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.8); } 50%{ box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2); } } @keyframes blink2{ 0%, 100%{ box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.8); } 50%{ box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2); } }
首先需要一個寬高固定的容器,并將其設置為相對定位以便子元素絕對定位。然后使用偽元素before和after模擬兩個玻璃球,并按照一定位置旋轉放置在容器上。通過給偽元素的box-shadow添加不同陰影效果,使得閃爍效果隨著時間產生變化。最后通過@keyframes定義動畫效果,使得偽元素的box-shadow逐漸變化并循環播放閃爍效果。
上一篇css班級教室表案例
下一篇css理論試題