效果:
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%;
}
}