CSS特效012：边框线条环绕流动效果

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享，希望能给您带来帮助。

css实战中，怎么绘制边框线条环绕流动效果呢？ 这是从网上学习来的示例，主要设置利用了相对位置，利用延时产生的时间差，在每个节点显示出一部分内容，在其他时间隐藏，达到一个流动的效果。

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-17
*/
<template>
	<div class="container">
		<div class="top">
			<h3>边框线条环绕流动效果</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi">
			微信：gis-dajianshi
			<span class="line"></span>
			<span class="line"></span>
			<span class="line"></span>
			<span class="line"></span>
		</div>
	</div>
</template>

<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: indianred;
		color: #fff;
	}

	.dajianshi {
		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: 15px;
		background: linear-gradient(90deg, transparent, blue);
		animation: animate1 8s linear infinite;
	}


	@keyframes animate1 {
		0% {
			left: -100%;
		}
		50%,
		100% {
			left: 100%;
		}
	}

	.line:nth-child(2) {
		top: -100%;
		right: 0;
		width: 15px;
		height: 100%;
		background: linear-gradient(180deg, transparent, red);
		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, orange);
		animation: animate3 8s linear infinite;
		animation-delay: 4s;
	}

	@keyframes animate3 {
		0% {
			right: -100%;
			height: 15px;
		}

		50%,
		100% {
			height: 10px;
			right: 100%;
		}
	}

	.line:nth-child(4) {
		bottom: -100%;
		left: 0;
		width: 15px;
		height: 100%;
		background: linear-gradient(360deg, transparent, #f0f);
		animation: animate4 8s linear infinite;
		animation-delay: 6s;
	}

	@keyframes animate4 {
		0% {
			bottom: -100%;
		}

		50%,
		100% {
			bottom: 100%;
		}
	}
</style>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

CSS基础知识点

1.CSS样式表
2.基础选择器：（1）标签选择器，（2）类选择器，（3）id选择器，（4）通配符选择器
3.复合选择器：（1）后代选择器，（2）子选择器，（3）并集选择器，（4）交集选择器，（5）伪类选择器。
4.字体样式属性：（1）字体大小font-size，（2）字体类型font-family，（3）字体粗细font-weight，（4）字体风格font-style
5.文本外观样式：（1）设置文本颜色color，（2）word-spacing，（3）letter-spacing，（4）line-height，（5）text-transform，（6）text-decoration，（7）text-align，（8）text-indent，（9）white-space
6.文本外观属性：（1）text-shadow，（2）overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性：（1）border-style，（2）border-width，（3）border-color，（4）border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片：（1）background-repeat，（2）background-position，（3）background-attachment，（4）background-size，（5）background-origin，（6）background-clip，（7）复合写法，（8）不透明
10.元素的类型
11.span标签
12.display
13.表格标签：（1）table标签，（2）tr标签，（3）td标签，（4）th标签，（5）表格边框，（6）折叠边框，（7）表格宽度和高度，（8）表格边框间距border-spacing，（9）表格标题位置caption-side
14.表单
14.1创建表单：（1）标签
14.2表单控件：（1）input控件，（2）input/标签的type属性，（3）textarea控件，（4）select控件
15.CSS盒子模型：（1）边框（border），（2）内边距(padding)，（3）外边距（margin），（4）清除内外边距，（5）盒子模型
16.浮动布局：（1）传统网页布局，（2）浮动简介，（3）浮动特性，（4）清除浮动
17.定位布局：（1）定位组成，（2）相对定位relative，（3）绝对定位absolute，（4）子绝父相，（5）固定定位fixed，（6）定位叠放次序z-index，（7）定位拓展
三.其他
1.圆角边框：（1）圆形，（2）圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式：（1）鼠标样式 cursor，（2）轮廓线 outline，（3）防止拖拽文本域 resize，
5.过渡 transition

结尾语

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。