如何使用 CSS 設定可動畫的底部邊框的寬度？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS 設定可動畫的底部邊框的寬度？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 24, 2023 pm 01:53 PM

如何使用 CSS 设置可动画的底部边框的宽度？

在 CSS 中，我們可以使用「border-bottom」CSS 屬性來設定 HTML 元素的下邊框。我們可以使用動畫屬性來動畫底部邊框的寬度。

此外，我們需要透過更改底部邊框的寬度來定義關鍵影格以對其進行動畫處理。

文法

使用者可以按照下面的語法來設定底部邊框寬度的動畫。

selector {
   animation: mymove 5s infinite;
}
@keyframes mymove {
   50% {
      border-bottom: 25px solid black;
    }
}

在上面的語法中，我們創建了「mymove」關鍵幀，將底部邊框的寬度從 5 像素設定為 25 像素。

範例 1

在下面的範例中，我們建立了包含「test」類別的 div 元素。此外，我們也對 div 元素套用了一些 CSS 來設定其樣式。我們使用「animation」屬性根據「mymove」關鍵影格對 div 元素進行動畫處理，持續 5 秒和無限次。

在「mymove」關鍵影格中，我們將底部邊框的寬度改為 0%、30%、60%、85% 和 100%。在輸出中，使用者可以觀察下邊框寬度的動畫。

<html>
<head>
   <style>
      .test {
         width: 500px;
         height: 200px;
         background-color: red;
         border: 2px solid green;
         border-bottom: 5px solid black;
         animation: mymove 5s infinite;
       }
       @keyframes mymove {
          0% { border-bottom: 5px solid black; }
          30% { border-bottom: 15px solid black; }
          60% { border-bottom: 25px solid black; }
          85% {  border-bottom: 15px solid black; }
          100% { border-bottom: 5px solid black; }
      }
   </style>
</head>
<body>
   <h2 id="Adding-the-i-animation-i-to-bottom-border-using-CSS"> Adding the <i> animation </i> to bottom border using CSS </h2>
   <div class = "test"> </div>
</html>

範例 2

在下面的範例中，我們建立了

元素並在其中加入了一些文字內容。之後，我們使用 CSS 屬性來設定元素的樣式。我們也使用「animation」屬性來設定底部邊框寬度的動畫。

在「邊框動畫」關鍵影格中，我們透過保持其他邊框屬性相同來更改邊框的寬度。

<html>
<head>    
    <style>
        .test {
            width: fit-content;
            border: 1px dotted blue;
            border-bottom: 1px solid red;
            animation: border-animation 1.5s infinite ease-in-out;
            padding: 5px 10px;
            color: green;
        }

        @keyframes border-animation {
            0% { border-bottom: 1px solid red; }
            30% { border-bottom: 3px solid red; }
            50% { border-bottom: 5px solid red; }
            70% { border-bottom: 3px solid red; }
            100% { border-bottom: 1px solid red; }
        }
    </style>
</head>
<body>
    <h2 id="Adding-the-i-animation-i-to-bottom-border-of-checkbox-using-CSS"> Adding the <i> animation </i> to bottom border of checkbox using CSS</h2>
    <h2 id="Welcome-to-the-TutorialsPoint"> Welcome to the TutorialsPoint! </h2>
</html>

用戶學會了使用 CSS 為邊框底部的寬度設定動畫。我們需要使用「animation」CSS 屬性並定義動畫的關鍵影格。在關鍵影格中，我們可以使用「bottom-border」或「bottom-border-width」CSS屬性來變更邊框底部的寬度。

以上是如何使用 CSS 設定可動畫的底部邊框的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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