📌  相关文章
📜  如何使用 CSS 创建边框动画?

📅  最后修改于: 2021-11-10 03:54:21             🧑  作者: Mango

使用悬停的 CSS 边框动画用于在我们将鼠标悬停在文本上时创建边框动画。我们将要使用的概念是 before 、 after 和 hover 选择器。强烈建议在继续阅读本文之前先浏览所有这些选择器。

处理方法:这个动画的处理方法是将动画分成两部分。顶部和右侧将使用 before 一次完成,底部和左侧将使用 after 选择器一次完成。

HTML 代码:我们已经创建了 HTML 文件,并在其中创建了一个 div,其中 div 为 h1。下面是相同的代码。



  

    
    
    GeeksforGeeks

  

    
        

GeeksforGeeks

    
  

CSS 代码:这个动画的 CSS 有点棘手,所以让我们试着一步一步地理解它。

第 1 步:我们所做的第一件事是提供基本背景并将我们的文本居中对齐。下面是相同的代码。

body {
    margin: 0;
    padding: 0;
    background: green;
}
  
.geeks {
    left: 40%;
    top: 40%;
    position: absolute;
    width: 300px;
    text-align: center;
}
  
h1 {
    position: relative;
}

第 2 步:第二步是创建顶部和右侧边框。

  • 首先是创建一个带有透明背景的边框。
  • 然后在悬停时为其设置动画,并为其提供线性动画和标识符名称作为 animate。
  • 现在使用关键帧,我们将为边框设置动画。确保仅将颜色应用于边框的顶部和右侧。首先,我们增加了上边框动画的宽度和右边框动画的高度。
.geeks::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid transparent;
}
 
.geeks:hover::before {
    animation: animate 1s linear forwards;
}
 
@keyframes animate {
    0% {
        width: 0;
        height: 0;
        border-top-color: black;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
 
    50% {
        width: 100%;
        height: 0;
        border-top-color: black;
        border-right-color: black;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
 
    100% {
        width: 100%;
        height: 100%;
        border-top-color: black;
        border-right-color: black;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}

第 3 步:使用 after 选择器重复第 2 步。在此步骤中要记住的一些关键点是:

  • 确保使顶部和右侧透明,左侧和底部为彩色。
  • 左边的高度会增加,底部的宽度会增加。
  • 确保在此步骤中为关键帧标识符使用不同的名称。
.geeks::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid transparent;
}
 
.geeks:hover::after {
    animation: animates 1s linear forwards;
}
 
@keyframes animates {
    0% {
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: black;
    }
 
    50% {
        width: 0;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: black;
        border-left-color: black;
    }
 
    100% {
        width: 100%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: black;
        border-left-color: black;
    }
}

完整的 CSS 代码:


完整代码:它是 HTML 和 CSS 代码的组合。



  

    
    
    GeeksforGeeks
    

  

    
        

GeeksforGeeks

    
  

输出: