如何使用HTML和CSS建立動畫橫幅鏈接

概述

我們可以使用HTML和CSS建立動畫橫幅，HTML提供橫幅的佈局，CSS提供帶有動畫效果的橫幅樣式。有時，在為廣告目的製作的橫幅中，會嵌入鏈接，為了突出顯示鏈接，開發人員會使鏈接具有動畫效果，以便在整個網頁內容中可見，並增加用戶點擊的興趣。

文法

在 HTML 中建立連結的語法是 -

<a href="#"></a>

演算法

第一步 − 在文字編輯器中建立一個HTML文件，並在其中加入HTML樣板。

第 2 步 − 現在建立一個父 div 容器，其中包含類別名為「bannerCover」的橫幅。

<div class="bannerCover"></div>

第三步驟 − 現在建立一個包含連結和其他資料的子容器div，並新增一個類別名為「banner」。

<div class="banner"></div>

第 4 步 − 現在使用 HTML 錨標記將連結新增至橫幅。

<a href="https://www.tutorialspoint.com">tutorialspoint</a>

第五步 − 現在在同一資料夾中建立一個style.css文件，並將css檔案連結到HTML文件。

<link rel="stylesheet" href="style.css">

第 6 步− 現在針對 HTML 的每個元素來設定橫幅樣式。

.bannerCover {
   margin: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.banner{
   box-shadow: 0 0 5px gray;
   padding:2rem;
   border-radius: 5px;
   text-align: center;
}

第 7 步 − 定位錨標記元素並使用動畫屬性為連結新增動畫效果。

a {
   text-decoration: none;
   font-weight: 800;
   font-size: 2rem;
   color: green;
   padding: 0 2rem;
   animation: zoomup 1s linear alternate infinite;
}

第8步 − 使用關鍵影格將橫幅連結動畫化。

@keyframes zoomup{
   0%{
      font-size: 2rem;
   }
   25%{
      font-size: 2rem;
   }
   50%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   75%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   100%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
}   

步驟 9 − 動畫連結已成功建立。

範例

在上面的範例中，我們在橫幅中建立了一個動畫連結。為此，我們創建了兩個檔案：index.html 和 stye.css。

   
   <link rel="stylesheet" href="style.css">
    


   

      

         <a href="https://www.tutorialspoint.com">tutorialspoint</a>
         
(Click the above text to redirect to above page.)
      
   

下圖顯示了上述範例的輸出，預設情況下連結的顏色為白色。在下圖中，橫幅中有一個文字為“tutorialspoint”，因此當使用者將此功能載入到瀏覽器並點擊紅色背景內容時，它會將使用者重新導向到連結的網頁。橫幅中的連結是動畫的，可以在一段時間內縮小和放大。

結論

由於我們在上面的範例中使用了動畫內容，因此 CSS 動畫屬性中的名稱和關鍵影格中動畫的名稱必須相同才能對特定元素執行動畫，否則動畫不會發生。

以上是如何使用HTML和CSS建立動畫橫幅鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章！