CSS按鈕動效是增強頁面交互性和視覺效果的重要手段。在按鈕點擊、鼠標懸停、頁面加載等狀態(tài)下,適當加入閃爍效果可以使按鈕更加生動、吸引人,給用戶帶來更好的體驗。
.button{ background: #3b72b8; color: #fff; font-size: 16px; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; position: relative; } .button:before{ content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; border-radius: 5px; z-index: -1; background: rgba(255,255,255,0.3); animation: blink 1s infinite; } @keyframes blink{ 50%{ opacity: 0; } }
以下是閃爍動效的CSS樣式代碼:
.button:before{ content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; border-radius: 5px; z-index: -1; background: rgba(255,255,255,0.3); animation: blink 1s infinite; } @keyframes blink{ 50%{ opacity: 0; } }
在上述代碼中,我們通過偽元素:before實現(xiàn)了閃爍效果,這個偽元素覆蓋在button按鈕上方,通過動畫Blink不斷變換透明度實現(xiàn)閃爍效果。可以通過改變border-radius、background顏色、動畫時間等屬性來調整按鈕閃爍的效果。
在實際應用中,我們可以通過判斷按鈕的狀態(tài),動態(tài)為按鈕添加或刪除閃爍的樣式,比如:
//按鈕懸停狀態(tài)下 .button:hover:before{ animation: none; background: rgba(255,255,255,0.7); } //按鈕點擊狀態(tài)下 .button:active:before{ background: rgba(255,255,255,0.9); }
以上是CSS按鈕動效實現(xiàn)閃爍效果的方法和代碼,通過適當?shù)膭有崿F(xiàn)生動、富有感染力的按鈕效果,提升用戶體驗。
上一篇css柱狀圖盒子
下一篇css標簽默認外邊距