css水滴波纹效果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);}

}

效果图

标签：水波纹,动画,200%,height,width,animation,radius,border,css

来源： https://www.cnblogs.com/yhhBKY/p/11934949.html