CSS3的按鈕放大縮小動畫是一種非常有趣的技術,可以為網站添加一些絢麗的特效。下面我們來看一下具體的實現方法。
.btn { width: 200px; height: 50px; background-color: #f8a; color: #fff; font-size: 18px; text-align: center; line-height: 50px; border-radius: 10px; transition: all 0.3s ease-in-out; } .btn:hover { transform: scale(1.2); box-shadow: 0 0 10px rgba(224, 130, 131, 0.5); }
在上面的代碼中,我們首先定義了一個.btn類樣式,包括按鈕的大小、顏色、字體等基本樣式,并且添加了一個all的運動屬性,指定了動畫效果的時間和緩動效果。
接著,我們通過:hover偽類選擇器為按鈕添加了鼠標懸停事件,將按鈕的大小放大了20%,同時添加了一個淡入淡出的邊框效果,使得按鈕更加美觀。
這種按鈕放大縮小動畫的效果可以通過調整transition屬性中的時間和緩動效果來進行微調,從而實現更加優美的動畫效果。
總之, CSS3的按鈕放大縮小動畫是一種非常有趣的技術,可以為網站添加一些絢麗的特效,同時也可以提升用戶的使用體驗。
上一篇css3掃光效果