CSS中的按鈕動畫是一種非常流行的效果,它可以讓網頁內容更加生動和具有吸引力。通常,我們使用CSS的hover和active偽類來實現按鈕動畫,也可以使用CSS3的transition和transform屬性來制作更加復雜的動畫效果。
/* 基礎hover動畫 */ .button{ display: inline-block; padding: 10px 20px; background-color: #333; color: #fff; transition: all 0.2s ease-in-out; } .button:hover{ background-color: #444; } /* 點擊效果 */ .button:active{ background-color: #555; } /* 更加復雜的動畫效果 */ .button2{ transform: scale(1); transition: all .2s ease-in-out; } .button2:hover{ transform: scale(1.1); transition: all .2s ease-in-out; }
以上是三種不同的按鈕動畫,第一個是基礎的hover動畫,第二個是點擊效果,最后一個是更加復雜的縮放效果。我們可以使用這些代碼為我們的按鈕添加不同的動畫效果,讓網頁變得更加生動有趣。
上一篇mysql 觸發器 循環
下一篇css里怎么設置跑馬燈