HTML+css渐变方块与圆型块动画源码

效果：

HTML

<div class="welcome"></div>
	<div class="square">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
	<div class="circle">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

CSS

.welcome{
	background-image: linear-gradient(#fa983a,#e55039);   
	position: relative;
	height: 100vh;
	overflow: hidden;
	font-family: sans-serif;
}
ul li{
	position: absolute;
	border: 1px solid #fff;
	width: 30px;
	height: 30px;
	list-style: none;
	opacity: 0;
	background: #fff;
}
.square li
{
	top: 50vh;
	left: 45vw;
	animation: square 10s linear infinite;
}
.square li:nth-child(2)
{
	top: 80vh;
	left: 10vw;
	animation-delay: 2s;
}
.square li:nth-child(3)
{
	top: 80vh;
	left: 85vw;
	animation-delay: 4s;
}
.square li:nth-child(4)
{
	top: 10vh;
	left: 70vw;
	animation-delay: 6s;
}
.square li:nth-child(5)
{
	top: 10vh;
	left: 10vw;
	animation-delay: 8s;
}
@keyframes square
{
	0%{
		transform: scale(0) rotateY(0deg);
		opacity: 1;
	}
	100%{
		transform: scale(5) rotateY(1000deg);
		opacity: 0;
	}
}
.circle li
{
	bottom: 0;
	left: 15vw;
	animation: circle 10s linear infinite
}
.circle li:nth-child(2)
{
	left: 35vw;
	animation-delay: 2s;
}
.circle li:nth-child(3)
{
	left: 55vw;
	animation-delay: 4s;
}
.circle li:nth-child(4)
{
	left: 75vw;
	animation-delay: 6s;
}
.circle li:nth-child(5)
{
	left: 90vw;
	animation-delay: 8s;
}

@keyframes circle
{
	0%{
		transform: scale(0) rotate(0deg);
		opacity: 1;
		bottom: 0;
		border-radius: 0;
	}
	100%{
		transform: scale(5) rotate(1000deg);
		opacity: 0;
		bottom: 90vh;
		border-radius: 50%;
	}
}