CSS實現閃關燈是通過動畫實現的,我們可以使用關鍵幀動畫來實現閃光效果。
.flash{ animation: blink 1s linear infinite; } @keyframes blink{ 50%{ opacity: 0; } }
上述代碼中,我們首先創建了一個名為“blink”的關鍵幀動畫,該動畫在50%時刻通過將元素的不透明度設置為0來實現閃光效果。
接著,我們給需要實現閃光效果的元素添加“flash”類,該類設置了無限循環的1秒鐘線性動畫“blink”,從而實現了指定元素的閃光效果。
當然,我們也可以自定義其他的動畫實現相關效果,例如借助CSS3的過渡效果來實現一個類似于燈光彈跳的效果。
.bounce{ animation: bounce 1s linear infinite; } @keyframes bounce{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
上述代碼中,我們創建了一個名為“bounce”的關鍵幀動畫,該動畫通過轉換動畫在50%時刻向上移動元素10個像素,然后再移回原始位置。
最后,我們將需要應用閃光燈效果的元素添加“bounce”類,該類設置了無限循環的1秒鐘線性動畫“bounce”,從而實現類似于燈光彈跳的效果。