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. [POI2008] POC-Trains 题解

    前言 题目链接:洛谷. 时间复杂度和输入同阶的做法. 题意简述 有 \(n\)(\(n \leq 10^3\))个长 \(m\) 的字符串,\(q\)(\(q \leq 10^5\))次操作,交换两个 ...

  2. CH03_运算符

    CH03_运算符 算术运算符 作用:用于处理四则运算 示例: #include <iostream> using namespace std; int main() { int a = 1 ...

  3. rcc of stm32

    1. G0 2. F0 / F1 / F3 F0 F1 F3 3. F2/F4 F205 f429 f7

  4. 2021 CCPC 哈尔滨

    gym 开场 zsy 签了 J,gjk 签了 B,我读错了 E 的题意,gjk 读对后过了 zsy 读了 K 给我,我记得是模拟赛原题,跟欧拉定理有关,但很难.他俩过了 D I,我大概会了 G 但不会 ...

  5. 最短路之Dijkstra

    Dijkstra算法: Dijkstra是一种求解 非负权图 上单源最短路径的算法. 思路:将所有结点分为两个集合:已经确定最短路径的点(S)和未确定最短路长度的点集(T),开始时所有点都属于T 初始 ...

  6. 安装 Oh My Posh

    Oh My Posh Oh My Posh 官网 安装 winget install JanDeDobbeleer.OhMyPosh -s winget Oh My Posh 更新很快,有时会被杀毒软 ...

  7. 受 LabelImg 启发的基于 web 的图像标注工具，基于 Vue 框架

    受 LabelImg 启发的基于 web 的图像标注工具,基于 Vue 框架   哟,网友们好,年更鸽子终于想起了他的博客园密码.如标题所述,今天给大家带来的是一个基于 vue2 的图像标注工具.至于 ...

  8. .NET 多版本 WinForm 开源控件库 SunnyUI

    前言 给大家推荐一款开源的 Winform 控件库,可以帮助我们开发更加美观.漂亮的 WinForm 界面. 项目介绍 SunnyUI.NET 是一个基于 .NET Framework 4.0+..N ...

  9. 【论文解读】RLAIF基于人工智能反馈的强化学习

    [论文解读]RLAIF基于人工智能反馈的强化学习 一.简要介绍 人类反馈强化学习(RLHF)可以有效地将大型语言模型(LLM)与人类偏好对齐,但收集高质量的人类偏好标签是一个关键瓶颈.论文进行了一场R ...

  10. 【QT性能优化】QT性能优化之QT6框架高性能模型视图代理框架千万级数据表分层查询优化

    [QT性能优化]QT性能优化之QT6框架高性能模型视图代理框架千万级数据表分层查询优化 简介 本文使用QT树状控件QTreeView快速展示SQLite数据库中的1000万条具有层次结构的数据记录,当 ...