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

概述

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

语法

在HTML中创建链接的语法如下：

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

步骤

步骤1 - 在文本编辑器中创建一个HTML文件，并在其中添加一个HTML模板。

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

<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 − 针对锚点标签元素，使用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和style.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”，所以当用户将该功能加载到浏览器并点击红色背景内容时，它会将用户重定向到链接的网页。横幅中的链接是动画的，会在一段时间内缩小和放大。