css实现水波纹效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="wave-box"><divclass="wave"></div></div></body></html>
本文转载自: https://blog.csdn.net/weixin_44224921/article/details/134572279
版权归原作者 原谅我很悲 所有， 如有侵权，请联系我们删除。
版权归原作者 原谅我很悲 所有， 如有侵权，请联系我们删除。