如何使用 CSS 创建边框动画？

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

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

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

  

    
    
    

  

    

        
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
    

  

输出：