vue3+css 实现水波纹效果

话不多说,直接上代码,template: 样式代码如下:

.ripple-dotted { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background-color: #2878ff; } .ripple1, .ripple2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 3px blue; animation: ripple 1s linear infinite; } .ripple2 { animation-delay: 0.5s; } @keyframes ripple { 0% { width: 8px; height: 8px; opacity: 1; } 50% { width: 20px; height: 20px; opacity: 0.5; } 100% { width: 40px; height: 40px; opacity: 0; } }

效果图如下: