波纹上下波动效果
html
<div class="box">
<ul >
<p></p>
<p></p>
<p></p>
<p></p>
</ul>
</div>
css3样式
<style>
.box{
width: 500px;
height: 500px;
background: #000;
margin: 0 auto;
display: flex;
align-items: center;
}
.box ul {
width: 24px;
height: 26px;
display: flex;
transform: rotateX(180deg);
justify-content: space-between;
}
.box p{
width: 4px;
height: 26px;
background: #fff;
border-radius: 4px;
}
.box p:first-child{
animation: Mymove1 2s ease infinite;
animation-delay: .1s;
/* transform: rotateX(180deg) */
}
.box p:nth-of-type(2){
animation: Mymove2 2s ease infinite;
animation-delay: .3s;
}
.box p:nth-of-type(3){
animation: Mymove2 2s ease infinite;
animation-delay: .5s;
}
.box p:nth-of-type(4){
animation: Mymove1 2s ease infinite;
animation-delay: .7s;
}
@keyframes Mymove1 {
0%{
height: 5px;
}
50%{
height: 26px;
}
100%{
height: 10px;
}
}
@keyframes Mymove2 {
0%{
height: 10px;
}
50%{
height: 26px;
}
100%{
height: 13px;
}
}
</style>