CSS按鈕發光閃爍是一種增加用戶交互體驗的簡單而有效的設計技術。具有發光閃爍效果的按鈕可以吸引用戶的眼球,讓他們更愿意點擊它,提高網站的活躍度和轉化率。
.button { background-color: #0d6efd; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; } .button:before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-color: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%) rotate(45deg); z-index: -1; opacity: 0; } .button:hover:before { opacity: 1; animation: pulse 1s ease-in-out; } @keyframes pulse { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1.5); opacity: 0; } }
上面的代碼是一個簡單的CSS樣式,實現了按鈕的基本樣式和發光閃爍效果。在按鈕的偽元素:before中,設置一個寬高為200%的半透明白色背景,并通過transform將其旋轉45度并定位到按鈕中心。同時設置z-index為-1,將其放在按鈕下層。
當鼠標移入按鈕時,通過:hover偽類觸發:before偽元素的屬性動畫。屬性動畫pulse在1s內完成,實現了按鈕發光閃爍的效果。在動畫執行過程中,偽元素從原來的大小開始縮放,最終消失。
可以根據需求調整偽元素的大小、旋轉角度和顏色等參數,優化發光閃爍效果,更好地引導用戶進行交互。