css实现小球循环跳动动画

源码

<div class="wrapper">
	<ul>
		<li class="container">
			<section class="sphere"></section><span class="shadow"></span>
		</li>
		<li class="container">
			<section class="sphere"></section><span class="shadow"></span>
		</li>
		<li class="container">
			<section class="sphere"></section><span class="shadow"></span>
		</li>
		<li class="container">
			<section class="sphere"></section><span class="shadow"></span>
		</li>
	</ul>
</div>

<style>
	* {
	    margin: 0;
	    padding: 0;
	    list-style-type: none;
	    box-sizing: border-box;
	}
	body {
	    background: #d9beca
	}
	.wrapper {
	    height: 40px;
	    width: 184px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    margin: -20px 0 0 -80px;
	}
	.wrapper >ul {
	    height: inherit;
	    width: 100%;
	    display: block;
	}
	.container {
	    width: 46px;
	    height: inherit;
	    float: left;
	}
	.sphere {
	    position: relative;
	    height: 40px;
	    width: 40px;
	    border: 6px solid #222;
	    border-radius: 50%;
	    background: #222;
	    margin-left: 3px;
	    top: 0;
	}
	.container:nth-of-type(1) .sphere {
	    animation: bounce 2s infinite ease-in-out;
	}
	.container:nth-of-type(2) .sphere {
	    animation: bounce 2s infinite .2s ease-in-out;
	}
	.container:nth-of-type(3) .sphere {
	    animation: bounce 2s infinite .4s ease-in-out;
	}
	.container:nth-of-type(4) .sphere {
	    animation: bounce 2s infinite .6s ease-in-out;
	}
	@keyframes bounce {
	    0% {
	        top: 0;
	    }
	    25% {
	        top: -180px;
	    }
	    50% {
	        top: 0;
	    }
	    100% {
	        top: 0;
	    }
	}
	span.shadow {
	    height: 10px;
	    width: 40px;
	    display: block;
	    background: rgba(0,0,0,0.45);
	    margin-left: -20px;
	    border-radius: 50%;
	    position: relative;
	    left: 50%;
	}
	@keyframes depth {
	    0% {
	        height: 10px;
	        width: 40px;
	        background: rgba(0,0,0,0.45);
	    }
	    25% {
	        height: 4px;
	        width: 20px;
	        background: rgba(0,0,0,0.25);
	    }
	    50% {
	        height: 10px;
	        width: 40px;
	        background: rgba(0,0,0,0.45);
	    }
	    100% {
	        height: 10px;
	        width: 40px;
	        background: rgba(0,0,0,0.45);
	    }
	}
	.container:nth-of-type(1) .shadow {
	    animation: depth 2s infinite ease-in-out;
	}
	.container:nth-of-type(2) .shadow {
	    animation: depth 2s infinite .2s ease-in-out;
	}
	.container:nth-of-type(3) .shadow {
	    animation: depth 2s infinite .4s ease-in-out;
	}
	.container:nth-of-type(4) .shadow {
	    animation: depth 2s infinite .6s ease-in-out;
	}
</style>

链接: https://www.fly63.com/course/33_1618