css实现水波纹效果

css实现水波纹效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wave-box {position: relative;width: 180px;height: 180px;border-radius: 50%;border: 3px solid rgb(246, 247, 248);box-shadow: 0 0 0 3px rgb(41, 134, 196);}.wave {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(23, 106, 201);border-radius: 50%;overflow: hidden;}.wave::before,.wave::after {content: '';position: absolute;top: 0;left: 50%;width: 250%;height: 250%;}.wave::after {border-radius: 40%;background-color: rgb(240, 228, 228);animation: shi 5s linear infinite;transform: translate(-50%, -65%) rotate(0deg)}@keyframes shi {0% {transform: translate(-50%, -65%) rotate(0deg);}100% {transform: translate(-50%, -65%) rotate(360deg);}}.wave::before {border-radius: 42%;background-color: rgb(240, 228, 228, 0.2);transform: translate(-50%, -60%) rotate(0deg);animation: xu 7s linear infinite;}@keyframes xu {0% {transform: translate(-50%, -60%) rotate(0deg);}100% {transform: translate(-50%, -60%) rotate(360deg);}}</style>
</head>
<body><div class="wave-box"><div class="wave"></div></div>
</body>
</html>