CSS 水波纹效果 动画
html
<div class="point"></div>
css
.point,.point::before,.point::after { position: absolute;/*必须设置*/
margin-top: -22px;
margin-left: 5px;
width: 30px;height: 15px;
border-radius: 50%;
content: '';/*必须设置*/ } .point::before {animation: scale 2s infinite;} .point::after { animation: scale2 2s infinite;}
--设置背景颜色 .point::before,.point::after { background: linear-gradient( rgba(60, 188, 179, 0) 2%, rgba(60, 188, 179, 0.4) 20%,rgba(60, 188, 179, 0.5) 40%, rgba(60, 188, 179, 0.6) 90%, rgba(60, 188, 179, 0.8) 95%, rgb(60, 188, 179) 100%); } .point {background-color: none !important;} @keyframes scale { 0% {transform: scale(1);opacity: .3} 100% {transform: scale(1);opacity: 0;} } @keyframes scale2 { 0% {transform: scale(1);opacity: .5;} 100% {transform: scale(2);opacity: 0;} }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步