本帖最后由 马黑黑 于 2022-3-24 13:29 编辑
<style>
.paBox {
width: 100%;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .8);
filter: contrast(30);
}
.ball {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: blue;
transition: transform .8s;
filter: blur(15px);
}
.ball-1 { animation: mvL 4s linear infinite alternate; }
.ball-2 { animation: wave linear 1s infinite alternate; }
.ball-3 { animation: mvR 4s linear infinite alternate; }
@keyframes wave { to { transform: scale(1.5) rotate(180deg); } }
@keyframes mvL { to { transform: translateX(-165px); } }
@keyframes mvR { to { transform: translateX(165px); } }
</style>
<div class="paBox">
<div class="ball ball-1"></div>
<div class="ball ball-2"></div>
<div class="ball ball-3"></div>
</div>
|