CSS3圓形動畫按鈕是一種常見的網頁設計元素。通過CSS3中的動畫和過渡效果,可以為按鈕添加吸引人的效果,吸引用戶點擊。
.round-button { display: inline-block; width: 100px; height: 100px; border-radius: 50%; background-color: #ffa500; box-shadow: 0 5px 0 #c45e00; transition: all 0.3s ease-in-out; } .round-button:hover { background-color: #ffbb33; box-shadow: 0 2px 0 #c45e00; transform: translateY(3px); } .round-button:active { background-color: #ff9900; box-shadow: none; transform: translateY(5px); transition-duration: 0.1s; }
上面的代碼演示了如何創建一個CSS3圓形動畫按鈕。使用border-radius屬性將按鈕的四個角制成圓角,通過hover和active偽類為按鈕添加鼠標懸停和點擊效果。通過transition屬性和transform屬性,可以控制按鈕懸停和點擊時的過渡效果。這樣的按鈕看起來精美、動畫效果出色,既方便了用戶操作,又增加了網頁的吸引力。
下一篇css3圖片簡單特效