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. dpwwn-01靶机笔记

    dpwwn-01靶机笔记 概述 这是一台Vulnhub的靶机,主要在web方面,我们无法找到突破口时,应该怎样抉择mysql和ssh的爆破,以及弱口令的尝试. 我这里准备了连接,当然你也可去Vulnh ...

  2. Java学习笔记1--JDK，JRE和JVM

    1.Java开发环境 Java开发环境是指Java程序员开发.编写.测试和调试Java程序所使用的所有工具和技术.Java开发环境通常由以下几个部分组成: JDK(Java Development K ...

  3. Maven经验分享（三）编译引入本地jar

    如果编译时需要引入本地jar,则可以增加如下配置: <plugin> <artifactId>maven-compiler-plugin</artifactId> ...

  4. VIM正则替换行尾

    https://nfcwar.lofter.com/post/1d1ee5d7_670890a 替换/删除某个字符后面的所有内容::%s/b.*/c/g   删除b后面所有的字符,以c替换.用g表示全 ...

  5. linux下开发编辑器vim常用指令

    1.vim的3种模式:编辑模式.插入模式.命令行模式(最后一行模式) 编辑模式:对代码的修改(复制.粘贴.剪切 插入模式:用户编辑代码等等) 命令行模式:保存 退出 另存为等 vim3种模式的切换 最 ...

  6. java_类方法&对象方法

    int new; 类方法 不能写入和访问其中的对象属性 可以直接通过类调用 通过类调用类方法,没有具体的对象, 所以 不可以访问对象属性, 但是可以访问类属性 public static void d ...

  7. iptables 工作过程整理

    转载注明出处: 1.概念和工作原理 iptables是Linux系统中用来配置防火墙的命令.iptables是工作在TCP/IP的二.三.四层,当主机收到一个数据包后,数据包先在内核空间处理,若发现目 ...

  8. 非常简易的SpringBoot后台项目

    非常简易的SpringBoot后台项目 1. 创建项目 使用IDEA创建 Spring项目,或在 https://start.spring.io/ . https://start.aliyun.com ...

  9. 总结：redis 突然变慢

    用户量暴增,无法下单,凌晨的夜,静悄悄... 经过查找发现Redis. 获取不到连接资源,并且集群中的单台 Redis 连接量很高. 大量的流量没了 Redis 的缓存响应,直接打到了 MySQL,最 ...

  10. canvas图片旋转扩展出原生JS实现移动端横竖屏手写签名示例

    前提知识 canvas是提供了各种各样的接口去控制画布,比如旋转rotate方法. 这里的旋转并不是真的把这个画布旋转了,例如ctx.rotate(90 * Math.PI / 180)顺时针旋转90 ...