看个效果图,没办法搞gif
魔法师开始表演
万能的div出场
<div class="container">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="collection"></div>
<span></span>
</div>
css全局样式
flex垂直布局,使水滴和容器垂直显示。
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
flex-direction: column;
filter: contrast(30);
}
水滴样式
.drop {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: absolute;
filter: blur(20px);
opacity: 0;
animation: 2.5s drop linear infinite;
}
水滴动画,下落过程逐渐缩小,且沿Y轴下滑
@keyframes drop {