水波纹震动特效代码

最新推荐文章于 2023-06-26 14:37:09 发布

IceYang-

最新推荐文章于 2023-06-26 14:37:09 发布

阅读量1.9k

点赞数 1

分类专栏： html类点文章标签： html 前端 web

本文链接：https://blog.csdn.net/YangBingX/article/details/70142800

版权

<div class="waves"></div>
html,body {
width: 100%;
height: 100%;
}
body {
background: #0A212E;
margin: 0px;
overflow: hidden;
animation: color-loop 18s infinite;
}
.waves {
position: relative;
top: 50%;
background: rgba(255, 255, 255, 0.3);
left: 50%;
width: 25px;
height: 25px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
-webkit-backface-visibility: hidden;
}
.waves:before {
position: absolute;
background: white;
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: 50%;
-webkit-backface-visibility: hidden;
animation: wave-animate 3s infinite ease-ou