css动画效果（边框线条流动效果）

最新推荐文章于 2024-06-28 14:24:07 发布

写代码的大学生

最新推荐文章于 2024-06-28 14:24:07 发布

阅读量1k

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139319094

版权

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6FxrVbiamfvb7b0H4qcDzZRwq3PqvXfuMDaPZ44VUic1h2WRZvI0eJ8F9XTgpbzeAu1fq3OAvcpgsg/640?wx_fmt=gif&from=appmsg&wxfrom=13

在网页设计中，边框往往被视作静态的容器，但在CSS的魔法下，它们可以变得生动而富有动感。CSS边框线条流动效果是一种创新的视觉技术，它能够让边框看起来像是在流动或变化，为网页添加一种独特的动态美感。

2.完整代码

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>动态边框</title>  
</head>  
<body>  
<div class="container">  
  
    <div class="box">  
        HELLO WORLD  
        <span class="line"></span>  
        <span class="line"></span>  
        <span class="line"></span>  
        <span class="line"></span>  
    </div>  
</div>  
</body>  
</html>

CSS

.container {  
    width: 800px;  
    height: 680px;  
    margin: 20px auto;  
    /* border: 1px solid green; */  
    position: relative;  
}  
.box {  
    width: 420px;  
    height: 210px;  
    margin: 100px auto;  
    line-height: 210px;  
    text-align: center;  
    font-size: 40px;  
    position: relative;  
    overflow: hidden;  
}  
  
.line {  
    position: absolute;  
}  
  
.line:nth-child(1) {  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 8px;  
    background: linear-gradient(90deg, transparent, rgb(234, 249, 158));  
    animation: animate1 8s linear infinite;  
}  
  
  
@keyframes animate1 {  
    0% {  
        left: -100%;  
    }    50%,  
    100% {  
        left: 100%;  
    }}  
  
.line:nth-child(2) {  
    top: -100%;  
    right: 0;  
    width: 8px;  
    height: 100%;  
    background: linear-gradient(180deg, transparent, rgb(160, 245, 250));  
    animation: animate2 8s linear infinite;  
    /* 注意要加上延时触发动画效果，这样线条才会依次触发 */    animation-delay: 2s;  
}  
  
@keyframes animate2 {  
    0% {  
        top: -100%;  
    }  
    50%,  
    100% {  
        top: 100%;  
    }}  
  
.line:nth-child(3) {  
    bottom: 0;  
    right: 0;  
    width: 100%;  
    background: linear-gradient(270deg, transparent, rgb(245, 58, 220));  
    animation: animate3 8s linear infinite;  
    animation-delay: 4s;  
}  
  
@keyframes animate3 {  
    0% {  
        right: -100%;  
        height: 8px;  
    }  
    50%,  
    100% {  
        height: 8px;  
        right: 100%;  
    }}  
  
.line:nth-child(4) {  
    bottom: -100%;  
    left: 0;  
    width: 8px;  
    height: 100%;  
    background: linear-gradient(360deg, transparent, rgb(254, 138, 49));  
    animation: animate4 8s linear infinite;  
    animation-delay: 6s;  
}  
  
@keyframes animate4 {  
    0% {  
        bottom: -100%;  
    }  
    50%,  
    100% {  
        bottom: 100%;  
    }}

3.关键点

CSS边框线条流动效果是有以下几个关键点：

CSS盒模型（Box Model）：通过设置width、height、margin等属性来控制元素的大小和位置。
CSS定位（Positioning）：使用position: relative;和position: absolute;来设置元素的定位方式，使得线条能够相对于小盒子定位。
CSS渐变（Gradients）：使用linear-gradient函数创建线条的渐变背景。
CSS动画（Animations）：使用@keyframes定义动画，并通过animation属性应用到元素上，实现线条的动态效果。
CSS伪类选择器（Pseudo-class selectors）：使用:nth-child伪类选择器来选择特定的线条元素，并对它们应用不同的样式。
CSS动画延时（Animation delay）：通过animation-delay属性设置动画的延时时间，使得线条动画能够依次开始。
CSS动画无限循环（Infinite animations）：通过设置animation-iteration-count: infinite;使得动画无限次地重复。

写代码的大学生

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
css动画效果（边框线条流动效果）

在网页设计中，边框往往被视作静态的容器，但在CSS的魔法下，它们可以变得生动而富有动感。CSS边框线条流动效果是一种创新的视觉技术，它能够让边框看起来像是在流动或变化，为网页添加一种独特的动态美感。
复制链接

扫一扫