如何使用 HTML 和 CSS 创建动画横幅链接

htmlcssweb developmentfront end technology更新于 2024/6/16 16:12:17

概述

我们可以使用 HTML 和 CSS 创建动画横幅。HTML 提供横幅的布局，CSS 提供带有动画的横幅样式。有时，用于广告目的的横幅会嵌入链接，因此为了向网页用户突出显示链接，开发人员会将链接制作成动画，使其在整个网页内容中可见，从而增加用户点击的兴趣。

语法

在 HTML 中创建链接的语法是 -

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

算法

步骤 1 − 在文本编辑器中创建一个 HTML 文件，其中包含 HTML 样板代码。

步骤 2 − 现在创建一个包含横幅的父 div 容器，类名为"bannerCover"。

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

步骤 3 − 现在创建一个子容器 div，其中包含横幅内容(例如链接和其他数据)，并添加类名为"banner"。

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

步骤 4 − 现在使用 HTML 锚标签将链接添加到横幅广告。

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

步骤 5 − 现在在同一文件夹中创建一个 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。

<html>
<head>
   <title> animated banner links</title>
   <link rel="stylesheet" href="style.css">
   <style>
      .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;
      }
   
      a {
         text-decoration: none;
         font-weight: 800;
         font-size: 2rem;
         color: green;
         padding: 0 2rem;
         animation: zoomup 1s linear alternate infinite;
      }
      @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;
         }
      }
   </style> 
</head>
<body>
   <div class="bannerCover">
      <div class="banner">
         <a href="https://www.tutorialspoint.com">tutorialspoint</a>
         <p>(Click the above text to redirect to above page.)</p>
      </div>
   </div>
</body>
</html>

下图展示了上述示例的输出，默认情况下，链接的颜色为白色。下图中横幅广告中的文本为"tutorialspoint"，因此当用户将此功能加载到浏览器中并点击红色背景内容时，它会将用户重定向到链接的网页。横幅广告中的链接是动画，会随着时间推移而缩小和放大。