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>
