<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>会动的小水滴</title> <style type="text/css"> * { margin: 0; padding: 0; } body { height: 100vh; background: linear-gradient(rgb(95, 95, 250) 10%, rgb(3, 3, 110)); } .content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .water-polo { position: relative; width: 200px; height: 200px; background: darkturquoise; overflow: hidden; border-top-left-radius: 80% 55%; border-top-right-radius: 0px; border-bottom-right-radius: 55% 80%; border-bottom-left-radius: 50%; transform: rotate(-45deg); } .water-polo::after { } .water-level{ position: absolute; /* 初始值 */ top: 33%; left: 67%; /* 初始值 */ top: 10%; left: 90%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 45%; background: rgba(255, 255, 255, 0.8); animation: wave 5s linear infinite; } @keyframes wave { 100% { transform: translate(-50%, -50%) rotate(360deg); } } </style> </head> <body> <div class="content"> <div class="water-polo"> <div class="water-level" style="top: -10%;left: 110%;"> </div> </div> </div> </body> </html>