CSS特效009：音频波纹加载律动

CSS常用示例100+专栏目录

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

css实战中，如何制作音频波纹加载律动效果呢？ 实际上很简单，主要用到keyframes状态的不同阶段，设置不同柱状条的高度、背景色、距顶部高度等。然后再来个动画无限大循环。

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-14
*/
<template>
	<div class="container">
		<div class="top">
			<h3>音频波纹加载效果</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi ">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></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: thistle;
		color: #fff;
	}

	.dajianshi {
		margin:100px auto 0;
		width: 200px;
		height: 120px;
		display: flex;
	}

	.dajianshi span {
		width: 10px;
		border-radius: 18px;
		margin-right: 20px;
	}

	.dajianshi span:nth-child(1) {
		animation: bar1 2s 0.2s infinite linear;
	}

	.dajianshi span:nth-child(2) {
		animation: bar2 2s 0.4s infinite linear;
	}

	.dajianshi span:nth-child(3) {
		animation: bar3 2s 0.6s infinite linear;
	}

	.dajianshi span:nth-child(4) {
		animation: bar4 2s 0.8s infinite linear;
	}

	.dajianshi span:nth-child(5) {
		animation: bar5 2s 1.0s infinite linear;
	}

	.dajianshi span:nth-child(6) {
		animation: bar6 2s 1.2s infinite linear;
	}

	.dajianshi span:nth-child(7) {
		animation: bar7 2s 1.4s infinite linear;
	}

	.dajianshi span:nth-child(8) {
		animation: bar8 2s 1.6s infinite linear;
	}

	.dajianshi span:nth-child(9) {
		animation: bar9 2s 1.8s infinite linear;
	}

	@keyframes bar1 {
		0% {
			background: #f677b0;
			margin-top: 25%;
			height: 10%;
		}

		50% {
			background: #f677b0;
			height: 100%;
			margin-top: 0%;
		}

		100% {
			background: #f677b0;
			height: 10%;
			margin-top: 25%;
		}
	}

	@keyframes bar2 {
		0% {
			background: #df7ff2;
			margin-top: 25%;
			height: 10%;
		}

		50% {
			background: #df7ff2;
			height: 100%;
			margin-top: 0%;
		}

		100% {
			background: #df7ff2;
			height: 10%;
			margin-top: 25%;
		}
	}

	@keyframes bar3 {
		0% {
			background: #8c7ff2;
			margin-top: 25%;
			height: 10%;
		}

		50% {
			background: #8c7ff2;
			height: 100%;
			margin-top: 0%;
		}

		100% {
			background: #8c7ff2;
			height: 10%;
			margin-top: 25%;
		}
	}

	@keyframes bar4 {
		0% {
			background: #7fd0f2;
			margin-top: 25%;
			height: 10%;
		}

		50% {
			background: #7fd0f2;
			height: 100%;
			margin-top: 0%;
		}

		100% {
			background: #7fd0f2;
			height: 10%;
			margin-top: 25%;
		}
	}

	@keyframes bar5 {
		0% {
			background: #7ff2d3;
			margin-top: 25%;
			height: 10%;
		}

		50% {
			background: #7ff2d3;
			height: 100%;
			margin-top: 0%;
		}

		100% {
			background: #7ff2d3;
			height: 10%;
			margin-top: 25%;
		}
	}
</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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

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+》。