代码来源:http://www.jq22.com/code1526

HTML:

<div class="waves">
</div>

css:

html,
body {
width: 100%;
height: 100%;
} body {
background: #0A212E;
margin: 0px;
overflow: hidden;
} .waves {
position: relative;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
-webkit-backface-visibility: hidden;
} .wave, .waves:before, .waves:after {
position: absolute;
background: white;
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: 50%;
-webkit-backface-visibility: hidden;
} .waves:before {
animation: wave-animate 3s infinite ease-out;
} .waves:after {
opacity:;
animation: wave-animate 3s 1.5s infinite ease-out;
} @keyframes wave-animate {
0% {
transform: scale(0);
opacity:;
transform-origin: center;
}
100% {
transform: scale(3);
opacity:;
transform-origin: center;
}
}

效果:

css水波动画效果-LMLPHP

04-16 02:22