1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>waterBall</title> <style> *{ margin: 0; padding: 0; } body{ height: 100vh; background: linear-gradient(rgb(95,95,250)10%,rgb(3,3,110)); } .main,.wave{ width: 200px; height: 200px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .main{ border: 3px solid darkturquoise; padding: 10px; } .wave{ background: darkturquoise; overflow: hidden; } .wave:after{ content: ""; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.8); position: absolute; left: 50%; top: 0; transform: translate(-50%,-60%); border-radius: 40%; animation: wave 5s linear infinite; } .wave:before{ content: "waterball"; position: absolute; left: 50%; top: 0; color: darkturquoise; z-index: 99; transform: translate(-50%,30px); text-transform: uppercase; } @keyframes wave{ 100%{ transform: translate(-50%,-60%) rotate(360deg); } } </style> </head> <body> <div class="main"> <div class="wave"></div> </div> </body> </html>
|