7、css3实现边框不停地跑动效果

效果例图：

1、上html代码：

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./3.css" />
    <title>Document</title>
</head>
 
<body>
    <div class="container">
        <div class="box">
            中国云南昆明
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
    </div>
</body>
</html>复制

2、上css代码：

 .container{
    width: 800px;
    height: 680px;
    margin: 20px auto;
    position: relative;
}
.box{
    width: 420px;
    height: 210px;
    margin: 100px auto;
    line-height: 210px;
    text-align: center;
    font-size: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 700;
    letter-spacing: 0.6em;
}
.line{
    position: absolute;
}
.line:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,transparent, #008c8c);
    animation: move1 8s linear infinite;
}
@keyframes move1 {
    0%{
        left: -100%;
    }
    50%,
    100%{
        left: 100%;
    }    
}
.line:nth-child(2){
    top: -100%;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,transparent, #008c8c);
    animation: move2 8s linear infinite;
    animation-delay: 2s;
}
@keyframes move2 {
    0%{
        top: -100%;
    }
    50%,
    100%{
        top: 100%;
    } 
}
 
 
.line:nth-child(3){
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 4px;
    background: linear-gradient(270deg,transparent, #008c8c);
    animation: move3 8s linear infinite;
    animation-delay: 4s;
}
@keyframes move3 {
    0%{
        right: -100%;
    }
    50%,
    100%{
        right: 100%;
    } 
}
.line:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(360deg,transparent, #008c8c);
    animation: move4 8s linear infinite;
    animation-delay: 6s;
}
@keyframes move4 {
    0%{
        bottom: -100%;
    }
    50%,
    100%{
        bottom: 100%;
    }
}复制

标签

7、css3实现边框不停地跑动效果

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

npm使用淘宝镜像下载依赖包

搭建Nexus前端npm私服，上传发布npm包和下载依赖

npm install包提示安装成功，但项目目录中没有出现node_modules的解决方案

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="./3.css" />
	<title>Document</title>
	</head>

	<body>
	<div class="container">
	<div class="box">
	中国云南昆明
	<span class="line"></span>
	<span class="line"></span>
	<span class="line"></span>
	<span class="line"></span>
	</div>
	</div>
	</body>
	</html>

	.container{
	width: 800px;
	height: 680px;
	margin: 20px auto;
	position: relative;
	}
	.box{
	width: 420px;
	height: 210px;
	margin: 100px auto;
	line-height: 210px;
	text-align: center;
	font-size: 40px;
	position: relative;
	overflow: hidden;
	border: 1px solid #eee;
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-weight: 700;
	letter-spacing: 0.6em;
	}
	.line{
	position: absolute;
	}
	.line:nth-child(1){
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg,transparent, #008c8c);
	animation: move1 8s linear infinite;
	}
	@keyframes move1 {
	0%{
	left: -100%;
	}
	50%,
	100%{
	left: 100%;
	}
	}
	.line:nth-child(2){
	top: -100%;
	right: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg,transparent, #008c8c);
	animation: move2 8s linear infinite;
	animation-delay: 2s;
	}
	@keyframes move2 {
	0%{
	top: -100%;
	}
	50%,
	100%{
	top: 100%;
	}
	}


	.line:nth-child(3){
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 4px;
	background: linear-gradient(270deg,transparent, #008c8c);
	animation: move3 8s linear infinite;
	animation-delay: 4s;
	}
	@keyframes move3 {
	0%{
	right: -100%;
	}
	50%,
	100%{
	right: 100%;
	}
	}
	.line:nth-child(4){
	bottom: -100%;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(360deg,transparent, #008c8c);
	animation: move4 8s linear infinite;
	animation-delay: 6s;
	}
	@keyframes move4 {
	0%{
	bottom: -100%;
	}
	50%,
	100%{
	bottom: 100%;
	}
	}

7、css3实现边框不停地跑动效果

微信扫一扫：分享