css的animation实现充电式loading加载动画

1.实现效果

2.实现原理

div+伪元素实现外边框样式
渐变+伪元素实现内部波浪
动画，实现在一定时间内，内部波浪高度的0到100%

3.实现代码

<div class="box">
	<div class="charge">
		<div class="wave"></div>
	</div>
</div>

.box {
	margin: 20px auto;
	width: 685px;
	height: 250px;
	background: #ccd8d7;
	border-radius: 10px;
	box-shadow: 0px 0px 30px 1px #eff3eb inset;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.charge {
	position: relative;
	width: 100px;
	height: 200px;
	margin: 10px auto;
	background-color: #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	text-shadow: 0px 0px 10px #fff;
}

.charge::after {
	content: '';
	position: absolute;
	top: -15px;
	left: 30px;
	width: 40px;
	height: 15px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10prx;
	background-color: #fff;
}

.wave {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: linear-gradient(#c6f3bd, #79965c, #7b8d82);
	overflow: hidden;
	animation: more 10s linear infinite;
}

@keyframes more {
	0% {
		height: 0%;
	}

	100% {
		height: 100%;
	}
}

.wave::before {
	position: absolute;
	content: '';
	top: -185px;
	left: -50px;
	width: 200px;
	height: 200px;
	border-radius: 45%;
	background-color: #fff;
	animation: move 10s linear infinite;
}

.wave::after {
	position: absolute;
	content: '';
	top: -180px;
	left: -50px;
	width: 200px;
	height: 200px;
	border-radius: 45%;
	background-color: #fff;
	opacity: .5;
	animation: move 8s linear infinite;
}

@keyframes move {
	100% {
		transform: rotate(360deg);
	}
}

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~