小加载动画 - 码农教程

在网上学了一个小加载动画，喜欢的话拿一个赞跟我换吧！纯 CSS 没有什么套路，来吧！展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载动画</title>
<style>
	body {
	    margin: 0;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}

	.container {
	    width: 8em;
	    height: 1em;
	    font-size: 35px;
	    display: flex;
	    justify-content: space-between;
	}

	.container span {
	    width: 1em;
	    height: 1em;
	    --duration: 1.5s;
	}

	.girl {
	    animation: slide var(--duration) ease-in-out infinite alternate;
	}

	@keyframes slide {
	    from {
	        transform: translateX(0);
	        filter: brightness(1);
	    }

	    to {
	        transform: translatex(calc(8em - (1em * 1.25)));
	        filter: brightness(1.45);
	    }
	}

	.boys {
	    width: 6em;
	    display: flex;
	    justify-content: space-between;
	}

	.boys span {
	    animation: var(--duration) ease-in-out infinite alternate;
	}

	.boys span:nth-child(1) {
	    animation-name: jump-off-1;
	}

	.boys span:nth-child(2) {
	    animation-name: jump-off-2;
	}

	.boys span:nth-child(3) {
	    animation-name: jump-off-3;
	}

	.boys span:nth-child(4) {
	    animation-name: jump-off-4;
	}

	@keyframes jump-off-1 {
	    0%, 15% {
	        transform: rotate(0deg);
	    }

	    35%, 100% {
	        transform-origin: -50% center;
	        transform: rotate(-180deg);
	    }
	}

	@keyframes jump-off-2 {
	    0%, 30% {
	        transform: rotate(0deg);
	    }

	    50%, 100% {
	        transform-origin: -50% center;
	        transform: rotate(-180deg);
	    }
	}

	@keyframes jump-off-3 {
	    0%, 45% {
	        transform: rotate(0deg);
	    }

	    65%, 100% {
	        transform-origin: -50% center;
	        transform: rotate(-180deg);
	    }
	}

	@keyframes jump-off-4 {
	    0%, 60% {
	        transform: rotate(0deg);
	    }

	    80%, 100% {
	        transform-origin: -50% center;
	        transform: rotate(-180deg);
	    }
	}

	.container span::before {    
	    content: '';
	    position: absolute;
	    width: inherit;
	    height: inherit;
	    border-radius: 15%;
	    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3);
	}

	.girl::before {
	    background-color: hotpink;
	}

	.boys span::before {
	    background-color: dodgerblue;
	    animation: var(--duration) ease-in-out infinite alternate;
	}

	.boys span:nth-child(1)::before {
	    filter: brightness(1);
	    animation-name: jump-down-1;
	}

	.boys span:nth-child(2)::before {
	    filter: brightness(1.15);
	    animation-name: jump-down-2;
	}

	.boys span:nth-child(3)::before {
	    filter: brightness(1.3);
	    animation-name: jump-down-3;
	}

	.boys span:nth-child(4)::before {
	    filter: brightness(1.45);
	    animation-name: jump-down-4;
	}

	@keyframes jump-down-1 {
	    5% {
	        transform: scale(1, 1);
	    }

	    15% {
	        transform-origin: center bottom;
	        transform: scale(1.3, 0.7);
	    }

	    20%, 25% {
	        transform-origin: center bottom;
	        transform: scale(0.8, 1.4);
	    }

	    40% {
	        transform-origin: center top;
	        transform: scale(1.3, 0.7);
	    }

	    55%, 100% {
	        transform: scale(1, 1);
	    }
	}

	@keyframes jump-down-2 {
	    20% {
	        transform: scale(1, 1);
	    }

	    30% {
	        transform-origin: center bottom;
	        transform: scale(1.3, 0.7);
	    }

	    35%, 40% {
	        transform-origin: center bottom;
	        transform: scale(0.8, 1.4);
	    }

	    55% {
	        transform-origin: center top;
	        transform: scale(1.3, 0.7);
	    }

	    70%, 100% {
	        transform: scale(1, 1);
	    }
	}

	@keyframes jump-down-3 {
	    35% {
	        transform: scale(1, 1);
	    }

	    45% {
	        transform-origin: center bottom;
	        transform: scale(1.3, 0.7);
	    }

	    50%, 55% {
	        transform-origin: center bottom;
	        transform: scale(0.8, 1.4);
	    }

	    70% {
	        transform-origin: center top;
	        transform: scale(1.3, 0.7);
	    }

	    85%, 100% {
	        transform: scale(1, 1);
	    }
	}

	@keyframes jump-down-4 {
	    50% {
	        transform: scale(1, 1);
	    }

	    60% {
	        transform-origin: center bottom;
	        transform: scale(1.3, 0.7);
	    }

	    65%, 70% {
	        transform-origin: center bottom;
	        transform: scale(0.8, 1.4);
	    }

	    85% {
	        transform-origin: center top;
	        transform: scale(1.3, 0.7);
	    }

	    100%, 100% {
	        transform: scale(1, 1);
	    }
	}
</style>
</head>
<body>
	<div class="container">
		<span class="girl"></span>
		<div class="boys">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</body>
<script>
</script>
</html>