使用HTML和CSS在懸停時抖動按鈕-html教學-PHP中文網

首頁

web前端

html教學

使用HTML和CSS在懸停時抖動按鈕

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 11, 2023 pm 07:41 PM

csshtml懸停效果

使用HTML和CSS在懸停時抖動按鈕

在本教學中，我們將學習使用 HTML 和 CSS 在使用者懸停時搖晃按鈕。建立搖動按鈕可以使應用程式的使用者體驗更具吸引力。

我們需要使用 CSS「關鍵影格」規則來建立自訂動畫來搖晃任何 HTML 元素。之後，我們可以使用自訂關鍵影格作為「animation」CSS屬性的值，以便當使用者將滑鼠懸停在按鈕上時搖動按鈕。

文法

使用者可以按照以下語法使用 HTML 和 CSS 來搖晃懸停按鈕。

.btn:hover {
   animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(10deg);
   }
}

在上面的語法中，我們創建了自訂 CSS 規則來為按鈕添加晃動動畫。使用者可以將“animation_time”替換為時間單位，並將“repetition”替換為數字來重複動畫。

Example

的中文翻譯為：

範例

在下面的範例中，我們垂直搖動按鈕。我們使用“button”標籤創建了普通的 HTML 按鈕，並給出了“btn”類別名稱。我們使用類別名稱存取該按鈕並設定其樣式。

在 CSS 中，我們使用「animation」屬性在使用者懸停按鈕時為按鈕新增「晃動」關鍵影格。在“搖晃”關鍵影格中，我們在0% 的動畫時間將按鈕旋轉“0 度”，在20% 的時間旋轉“5 度”，在50% 的時間旋轉按鈕“0 度”，在50% 的時間旋轉按鈕“5 度” 70% 的時間為“0 度”，100% 的時間為“0 度”。

在輸出中，使用者可以觀察到按鈕在垂直方向上的晃動。

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: red;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.5s infinite;}
      @keyframes shaking {
         0% {transform: rotate(0deg);}
         20% {transform: rotate(-4deg);}
         50% {transform: rotate(0deg);}
         70% {transform: rotate(4deg);}
         100% {transform: rotate(0deg);}
      }
   </style>
   <body>
      <h2 id="Shaking-the-button-vertically-using-HTML-and-CSS"> Shaking the button vertically using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Submit </button>
      </div>
   </body>
</html>

Example

的中文翻譯為：

範例

在下面的範例中，我們使用HTML和CSS水平晃動按鈕。

我們使用了CSS屬性 'transform: translateX（）' 來在水平方向上抖動按鈕。首先，我們將按鈕朝負方向移動。接下來，我們將按鈕移到原始位置。然後，我們將按鈕向正方向移動，最後，我們使用CSS的 'keyframes' 規則將按鈕移動到原始位置

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: black;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(-10px);}
         20% {transform: translateX(-5px);}
         50% {transform: translateX(-5px);}
         70% {transform: translateX(-5px);}
         80% {transform: translateX(10px);}
         90% {transform: translateX(-10px);}
      }
   </style>
   <body>
      <h2 id="Shaking-the-button-Horizontally-using-HTML-and-CSS"> Shaking the button Horizontally using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Hover the Button </button>
      </div>
   </body>
</html>

Example

的中文翻譯為：

範例

在下面的範例中，我們將學習如何水平和垂直地搖晃按鈕。我們使用‘translateX()’和‘rotate()’一起作為‘transform’ CSS屬性的值。

‘translateX（）’將按鈕水平移動，‘rotate（）’函數將按鈕垂直移動。在輸出中，使用者可以觀察到當他們懸停在按鈕上時，它會稍微水平和垂直移動。然而，使用者可以增加‘translateX（）’函數的參數值，以在水平方向上抖動更多。

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: green;
         color: white;
         font-size: 25px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(0) rotate(0deg);}
         25% {transform: translateX(15px) rotate(5deg);}
         50% {transform: translateX(0px) rotate(0deg);}
         75% {transform: translateX(-15px) rotate(-5deg);}
         100% {transform: translateX(0px) rotate(0deg);}
      }
   </style>
   <body>
   <h3 id="Shaking-the-button-Horizontally-and-vartically-using-HTML-and-CSS"> Shaking the button Horizontally and vartically using HTML and CSS</h3>
   <div>
      <button class = "btn"> Point out the Button </button>
   </div>
</body>
</html>

結論

在本教學中，使用者學會了只使用CSS來抖動HTML按鈕。在第一個範例中，我們學會了垂直抖動按鈕。在第二個範例中，我們學會了水平抖動按鈕；在最後一個範例中，我們學會了在水平和垂直方向上抖動按鈕。

以上是使用HTML和CSS在懸停時抖動按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles