<html>
<body>
<div class="cup"></div>
</body>
<style>
body {
background-color: antiquewhite;
}
.cup {
width: 200px;
height: 200px;
box-shadow: inset 0px 0px 100px 100px #76DAFF;
overflow: hidden;
position: relative;
margin: 200px auto;
clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}
.cup::before {
content: '';
width: 300px;
height: 300px;
background-color: #fff;
position: absolute;
left: -25%;
top: -100%;
animation: animate 2s linear infinite;
border-radius: 40% 30% 50% 60%;
}
@keyframes animate {
100% {
transform: rotate(360deg);
}
}
</style>
</html>
一杯摇晃的水