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. Ubuntu系统中CUDA套件nvvp启动后报错Unable to make protected void java.net.URLClassLoader.addURL(java.net.URL) accessible: module java.base does not "opens java.net" to unnamed module @380fb434

    最近在看cuda方面的内容,需要对cuda代码做一些性能分析,于是需要使用nvvp,但是启动nvvp后报错:Caused by: java.lang.reflect.InaccessibleObjec ...

  2. [COCI 2023/2024 #1] Mostovi 题解

    前言 题目链接:洛谷. 题目分析 首先可以确定的是需要枚举断边,所以我们希望两次枚举之间能有些关联.不难想到类树形 DP 的套路,建 DFS 树,只不过这题除了讨论和父亲之间的边,还要考虑返租边.以下 ...

  3. [COCI 2023/2024 #2] Zatopljenje 题解

    UPDATE on 2024.4.25 改掉奇怪压行码风,并稍作排版. 前言 题目链接:洛谷. 题目分析 首先发现区间中的个数等于 \(\texttt{高度大于 x 的位置的个数} - \texttt ...

  4. 在oracle中将一行字符串拆分成多行

    例如,有如下一张表,表名为bk_test.插入了以下数据: CREATE TABLE BK_TESK(id varchar2(10),s varchar2(20)); insert into BK_T ...

  5. 【模板】树的直径(dfs & dp)

    树的直径 给定n个点 n-1条边 和每条边的val 输出直径的大小和 直径上的点的序号 input: 8 1 2 2 1 3 1 1 5 10 2 4 3 4 6 4 3 7 5 7 8 2 outp ...

  6. [kubernetes]使用kubeadm和containerd部署kubernetes

    前言 因宿主机内核版本限制和垂直伸缩特性的需要,安装的k8s版本为1.25,runtime为containerd,cni为calico. containerd.kubeadm.kubelet也可以用包 ...

  7. C语言linux系统fork函数

    References: c语言fork函数 linux中fork()函数详解 一.fork函数简介 作用 在linux下,C语言创建进程用fork函数.fork就是从父进程拷贝一个新的进程出来,子进程 ...

  8. linux 环境中cat命令进行关键字搜索

    在linux环境中通过关键字搜索文件里面的内容 1.显示文件里匹配关键字那行以及上下50行 cat 文件名 | grep -C 50 '关键字' 2.显示关键字及前50行 cat 文件名 | grep ...

  9. 科技助力上亿用户隐私安全保护，合合信息两款产品再获CCIA PIA星级标识

    随着互联网技术的飞速发展,个人信息的收集.存储.使用和传输变得日益频繁,其泄露和滥用的风险也随之增加,个人信息保护已成为社会共同关注的热点议题.近期,"中国网络安全产业联盟(CCIA)数据安 ...

  10. Asp.net core 学习笔记之 Tag Helper

    refer : https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring?view=aspnetcore ...