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边框线条流动效果是有以下几个关键点：

  1. CSS盒模型（Box Model）：通过设置width、height、margin等属性来控制元素的大小和位置。

  2. CSS定位（Positioning）：使用position: relative;和position: absolute;来设置元素的定位方式，使得线条能够相对于小盒子定位。

  3. CSS渐变（Gradients）：使用linear-gradient函数创建线条的渐变背景。

  4. CSS动画（Animations）：使用@keyframes定义动画，并通过animation属性应用到元素上，实现线条的动态效果。

  5. CSS伪类选择器（Pseudo-class selectors）：使用:nth-child伪类选择器来选择特定的线条元素，并对它们应用不同的样式。

  6. CSS动画延时（Animation delay）：通过animation-delay属性设置动画的延时时间，使得线条动画能够依次开始。

  7. CSS动画无限循环（Infinite animations）：通过设置animation-iteration-count: infinite;使得动画无限次地重复。

css动画效果（边框线条流动效果）的更多相关文章

  1. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  2. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  3. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

  4. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  5. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  7. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

    这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...

  10. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

随机推荐

  1. 根据域名获取IP

    /*************************************************************************************************** ...

  2. 代码随想录Day12

    二叉树遍历 分为前序.中序.后续.层序四种 其中前中后序属于深度优先搜索,层序属于广度优先搜索 前序遍历顺序: 根节点->左子树->右子树 中序遍历顺序: 左子树->根节点-> ...

  3. SMU 2024 spring 天梯赛4

    SMU 2024 spring 天梯赛4 7-1 心理阴影面积 - SMU 2024 spring 天梯赛4 (pintia.cn) 由 \(d = \frac{Ax+By+c}{\sqrt {A^2 ...

  4. Game on Sum--组合数学--DP

    \(Codeforces-Round 767\) (Div. 2) F2. \(Game \ on \ Sum\) \(HERE\) 题意 \(QZS\) 和 \(HANGRY\) 玩游戏. 游戏共有 ...

  5. canfestival源码下载教程

    先进入官网的这个页面 https://canfestival.org/code.html.en 点击箭头所指的地方 选择日期最新的点击下载

  6. JS的可选链操作符（?.）与双问号（??），你用到了吗？

    可选链操作符(?.) 以前一般这样使用: let nestedProp = obj.first && obj.first.second; 或者这样: let temp = obj.fi ...

  7. Angular 18+ 高级教程 – Angular Compiler (AKA ngc) Quick View

    前言 在 Get Started 那一篇,我们提到过 Angular Compilation.这篇稍微给点具体画面,让大家感受一下. 但不会讲细节,对细节感兴趣的可以看这篇 Medium – How ...

  8. Figma 学习笔记 – Keyboard Shortcut and Tips 小技巧

    参考: 10 tips to work 10x faster in Figma 15 tips to design 15X faster in Figma | Figma Tutorial 2021 ...

  9. 分享3款开源、免费的Avalonia UI控件库

    Avalonia介绍 Avalonia是一个强大的框架,使开发人员能够使用.NET创建跨平台应用程序.它使用自己的渲染引擎绘制UI控件,确保在Windows.macOS.Linux.Android.i ...

  10. 第44天：WEB攻防-PHP应用&SQL盲注&布尔回显&延时判断&报错处理&增删改查方式

    #PHP-MYSQL-SQL操作-增删改查 1.功能:数据查询 查询:SELECT * FROM news where id=$id 2.功能:新增用户,添加新闻等 增加:INSERT INTO ne ...