<div class="bg">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
<style scoped>
.bg {
background: #0099cc;
height: 150px;
width: 100%;
}
.jumper {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
}
.jumper > div {
background-color: #f4090a;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
animation-fill-mode: both;
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
margin: 0;
width: 40px;
height: 40px;
animation: jumper 1.2s 0s linear infinite;
}
.jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
.jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
@keyframes jumper {
0% {
transform: scale(0);
opacity: 0;
}
5% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
涟漪效果
最新推荐文章于 2024-07-11 15:59:08 发布