absolute relative
html图⽚⽔波浪,css实现⽔波纹，波浪动画效果⽔波纹效果
css
.wave{
position: relative;
border: 1px solid silver;
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 50px;
margin: 0 auto;
font-size: 14px;
text-align: center;
overflow: hidden;
animation: water-wave linear infinite;
}
.wave1{
position: absolute;
top: 40%;
left: -25%;
background: #33cfff;
opacity: .7;
width: 200%;
height: 200%;
border-radius: 40%;
animation: inherit;
animation-duration: 5s;
}
.wave2{
position: absolute;
top: 40%;
left: -35%;
background: #0eaffe;
opacity: .7;
width: 200%;
height: 200%;
border-radius: 35%;
animation: inherit;
animation-duration: 7s;
}
.wave3{
position: absolute;
top: 50%;
left: -35%;
background: #0f7ea4;
opacity: .3;
width: 200%;
height: 200%;
border-radius: 33%;
animation: inherit;
animation-duration: 11s;
}
@keyframes water-wave{
0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。