如何使用CSS建立按鈕懸停動畫效果？-css教學-PHP中文網

首頁

web前端

css教學

如何使用CSS建立按鈕懸停動畫效果？

PHPz

Sep 06, 2023 am 09:53 AM

如何使用CSS建立按鈕懸停動畫效果？

CSS中的懸停動畫效果是指當滑鼠指標停留在元素上時，元素外觀會改變。我們使用CSS在懸停時創建各種動畫效果，例如縮放、淡入淡出、滑動或旋轉元素。

按鈕懸停動畫效果的屬性

transform − 這個屬性允許您對元素進行縮放、旋轉或平移。
opacity − 這個屬性設定元素的透明度級別，其中1表示完全可見，0表示完全透明。
background-color − 這個屬性設定元素的背景顏色。
color − 這個屬性設定元素的文字顏色。
transition − 此屬性控制兩個狀態之間的動畫效果，例如預設狀態和懸停狀態。
bottom和top - 屬性將元素相對於其容器定位。

使用CSS建立按鈕懸停動畫效果

按鈕懸停動畫是為網站增加視覺吸引力的好方法。要使用CSS建立按鈕懸停動畫效果，我們通常會使用:hover偽類選擇器與CSS轉場或關鍵影格動畫結合。透過以下步驟，我們可以輕鬆地創建按鈕懸停動畫效果。

第一步 - 建立用於黏性球動畫的HTML程式碼
#第二步 - 新增CSS樣式到按鈕
第三步 - 新增懸停動畫效果

In this article we will explore three examples to create button hover animation effects in CSS.

範例1 - 懸停放大

在這個範例中，按鈕將具有藍色背景和白色文字。當滑鼠指標停留在按鈕上時，按鈕將使用transform屬性以平滑的過渡在0.5秒內縮放20%，背景顏色將變為綠色。

<!DOCTYPE html>
<html>
<head>
   <style>
      Body{
         text-align:center;
      }
      .scale-up-btn {
         background-color: blue;
         color: white;
         padding: 10px 30px;
         margin:20px;
         border: none;
         transition: transform 0.5s ease;
         transform: scale(1);
         border-radius:10px;
      }
      .scale-up-btn:hover {
         transform: scale(1.2);
         background-color: green;
      }
   </style>
</head>
   <body>
      <h2 id="Button-hover-animation-effect-using-CSS">Button hover animation effect using CSS</h2>
      <h3 id="Scale-Up-on-Hover-effect">Scale Up on Hover effect</h3>
      <button class="scale-up-btn">Hover Me</button>
   </body>
</html>

範例2：滑鼠懸停時淡入

在這個範例中，按鈕將具有藍色背景和白色文本，初始不透明度為0.5。當滑鼠指標停留在按鈕上時，不透明度將在0.5秒內平滑過渡到1。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .fade-in-btn {
         background-color: blue;
         color: white;
         padding: 10px 20px;
         margin:15px;
         border: none;
         opacity: 0.5;
         transition: opacity 0.5s ease;
      }
      .fade-in-btn:hover {
         opacity: 1;
      }
   </style>
</head>
   <body>
      <h2 id="Button-hover-animation-effect-using-CSS">Button hover animation effect using CSS</h2>
      <h3 id="Fade-In-Effect-on-Hover">Fade In Effect on Hover</h3>
      <button class="fade-in-btn">Hover Me</button>
   </body>
</html>

範例3：滑鼠懸停時向上滑動

#在這個例子中，按鈕將具有藍色背景和白色文本，位置設定為相對。底部屬性設定為0，表示按鈕位於其容器的底部。當滑鼠指標停留在按鈕上時，底部屬性將增加到20px，導致按鈕在0.5秒內以平滑的過渡向上滑動。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .slide-up-btn {
         background-color: blue;
         color: white;
         padding: 15px 30px;
         border: none;
         position: relative;
         bottom: 0;
         transition: bottom 0.5s ease;
         border-radius:10px;
      }
      .slide-up-btn:hover {
         bottom: 20px;
      }
   </style>
</head>
   <body>
      <h3 id="Slide-Up-Effect-on-Hover">Slide Up Effect on Hover</h3>
      <button class="slide-up-btn">Hover Me</button>
   </body>
</html>