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. 从baselines库的common/vec_env/vec_normalize.py模块看方差的近似计算方法

    在baselines库的common/vec_env/vec_normalize.py中计算方差的调用方法为: RunningMeanStd 同时该计算函数的解释也一并给出了: https://en. ...

  2. 在Debian上安装freeswitch

    在Debian上安装freeswitch 说明: 首次发表日期:2024-08-12 参考文档: https://medium.com/@jogikrunal9477/ultimate-guide-t ...

  3. Camera | 9.如何让camera支持闪光灯？-基于rk3568

    一.闪光灯基本原理 工作模式 Camera flash led分flash和torch两种模式. flash: 拍照时上光灯瞬间亮一下,电流比较大,目前是1000mA,最大电流不能超过led最大承受能 ...

  4. 电子行业MES系统流程图梳理

  5. 使用了 sudo 却依然显示权限不够的原因

    $ sudo echo "151.101.76.133 raw.githubusercontent.com" >> /etc/hosts bash: /etc/host ...

  6. pikachu靶场-验证码

    先打开靶场,然后打开你的十米大砍刀burp,再把浏览器代理给配置好,开搞 1.先随便输入帐号和密码,用burp抓包 2.burp抓到包后用快捷键ctrl+l打开Intruder 3.确定 4.选择cl ...

  7. SPSS25.0中文破解版安装教程及使用教程

    目录 第一步,下载链接: 下载并解压,管理员身份运行SPSS 25 64bit.exe: 第二步,安装过程一路默认,安装路径可以改变,然后等待安装完成即可: 第三步,安装完成后,立即启动SPPS; 第 ...

  8. WSL2

    Ref: Windows Subsystem for Linux Installation Guide for Windows 10 Windows Subsystem for Linux 2: Th ...

  9. c程序设计语言 by K&R（一）一些c语言基础知识

    出自<c程序设计语言> by K&R: 一.导言 二.类型.运算符与表达式 三.控制流 1. 字符输入与输出 getchar() 和 putchar(),输入一个字符.输出一个字符 ...

  10. 【解题报告】P8478 「GLR-R3」清明

    P8478 「GLR-R3」清明 参考了出题人题解和 xcyyyyyy 大神的题解,强推前两篇. 拿到题完全没思路怎么办??? 人类智慧的巅峰,思维量的登峰造极. 换句话说就是非人题目,不过不得不说 ...