waves 波纹

资料来源：网络整理时间：2023/2/14 0:42:32 共计：3650 浏览

</div>

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: 0;
animation: wave-animate 3s 1.5s infinite ease-out;
}

@keyframes wave-animate {
0% {
    transform: scale(0);
    opacity: 1;
    transform-origin: center;
}
100% {
    transform: scale(3);
    opacity: 0;
    transform-origin: center;
}
}

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：按钮动画 - 波纹效果 | ·下一条：点击按钮时，按钮背景显示波纹效果