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

概述

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

语法

在HTML中创建链接的语法为：

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

算法

步骤1 − 在文本编辑器中创建一个HTML文件，其中包含HTML基本结构。

步骤2 − 现在创建一个父div容器，其中包含带有“bannerCover”类名的横幅。

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

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

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

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

<a href="https://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 − 定位锚标签元素，并使用animation属性来为链接制作动画。

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。

Open Compiler
<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://tutorialspoint.com">tutorialspoint</a>
         <p>(Click the above text to redirect to above page.)</p>
      </div>
   </div>
</body>
</html>

下图显示了上述示例的输出，默认情况下链接的颜色为白色。下图中，横幅中有一段文字“tutorialspoint”，因此当用户将此功能加载到浏览器并点击红色背景内容时，它会将用户重定向到链接的网页。横幅中的链接是动画的，会在一段时间内放大和缩小。

结论

由于我们在上面的示例中使用了动画内容，因此CSS的animation属性中的名称和关键帧中的动画名称必须相同才能对特定元素执行动画，否则动画将不会发生。

更新于：2023年5月9日

5000+ 浏览量

开启您的职业生涯

完成课程获得认证

开始学习
广告