CSS放射按鈕集合樣式是一種常見的Web開發技術,可以讓網頁設計更加美觀引人注目。放射按鈕使用CSS3中的偽元素實現,非常簡單易用,并支持各種樣式的變化。在本文中,我們將介紹如何使用CSS實現放射按鈕集合樣式。
.btn { position: relative; display: inline-block; margin: 0.5rem; width: 200px; height: 50px; color: #fff; font-size: 1.5rem; text-align: center; line-height: 50px; cursor: pointer; border-radius: 50px; background-color: #e91e63; box-shadow: 0 5px 10px #b80f48; } .btn:before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.04); z-index: -1; animation: wave 1.5s ease-out infinite; } @keyframes wave { 0% { transform: scale(0.8); } 40% { transform: scale(1); } 80% { transform: scale(1.2); } 100% { transform: scale(1.2); opacity: 0; } }
在上面的代碼中,我們定義了一個通用的按鈕樣式,然后使用:before偽元素添加了放射效果。在偽元素的樣式中,我們定義了一個圓形的背景,并使用了RGBA顏色模式來使其半透明,然后使用動畫實現波狀擴散的效果。
這是一個非常簡單的例子,您可以在此基礎上自行修改樣式,加入鍵盤懸停,點擊事件等交互效果,以實現更加豐富多彩的按鈕樣式。