📌  相关文章
📜  如何使用 HTML 和 CSS 创建动画横幅链接?

📅  最后修改于: 2021-08-30 10:50:13             🧑  作者: Mango

链接是网站制作中使用的任何组件中最重要的部分之一。几乎每个组件中都有某种形式的链接。一个常见的例子是菜单/导航栏。我们所看到的只是一些按钮,例如 home、about 等,但在引擎盖下它们都是链接。有时会出现您不想将链接包装在按钮内的情况。因此,在这种情况下,横幅链接可能非常有用。它具有非常简单的外观和动画,这使得设计和实现变得容易,而且由于它是一个简单而干净的设计,它看起来也很棒。
方法:方法是在链接周围设置一些边框,然后在鼠标悬停时拉长整个链接。现在,有很多方法可以实现相同的功能,但我们将操纵字母间距来实现我们的目标。
HTML 代码:在本节中,我们创建了一个简单的链接,可将我们带到无处可去。您应该在标签的 href 属性中添加所需的链接。



  
    
    
    Animated Link

  
    GeeksforGeeks
  

CSS 代码:对于 CSS,请按照以下给出的步骤操作。

  • 第 1 步:应用一些基本样式链接字体大小、字体系列等。
  • 第 2 步:应用任何颜色和宽度的顶部和底部边框。
  • 第 3 步:使用悬停选择器并增加字母间距。

注:字母间距应至少增加原始字母间距值的 2-3 倍。

a{
        position: absolute;
        top: 50%;
        left:50%;
        padding: 15px 0;
        font-size: 24px;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: #262626;
        border-top: 2px solid #262626;
        border-bottom: 2px solid #262626;
        letter-spacing: 2px;
        transition: .5s;
  
      }
      a:hover{
        letter-spacing: 10px;
      }

完整代码:是以上两段代码的组合。



  
    
    
    Animated Link
    
  
  
    GeeksforGeeks
  

输出: