这个代码我个人觉得还是比较有意思的，如果你也需要过渡动画或者跳转页面的话，那么可以尝试使用这个代码作为效果，下面是效果图： [video link="https://www.wpxsxy.com/wp-content/uploads/2021/07/Video_20210727180038.mp4" unique_number="video_d0b9dba27e40401aa500ead93b3fa798"]

效果整体来看还是不错的，代码方面直接将下面的内容添加到CSS中：

 * {
	margin:0px;
	padding:0px;
	border:0px;
}
html,body {
	min-height:100%;
}
body {
	background:#f8f8f8;
}
.loader {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
	width:175px;
	height:100px;
}
.loader span {
	display:block;
	background:#fcb34f;
	width:7px;
	height:10%;
	border-radius:14px;
	margin-right:5px;
	float:left;
	margin-top:25%;
}
.loader span:last-child {
	margin-right:0px;
}
.loader span:nth-child(1) {
	animation:load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
	animation:load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
	animation:load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
	animation:load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
	animation:load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
	animation:load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
	animation:load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
	animation:load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
	animation:load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
	animation:load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
	animation:load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
	animation:load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
	animation:load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
	animation:load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
	animation:load 2.5s 1.4s infinite linear;
}
@keyframes load {
	0% {
	background:#fcb34f;
	margin-top:25%;
	height:10%;
}
50% {
	background:#ff840b;
	height:100%;
	margin-top:0%;
}
100% {
	background:#ff840b;
	height:10%;
	margin-top:25%;
}
}

同样的，需要配合HTML内容来进行展现：

有兴趣的可以自己去实践一下，操作起来应该不会很难。