不多說先上圖,如下圖
其實上圖實現的水波浪的效果並不是讓藍色部分的水動,而是使白色區域變化(讓兩個橢圓繞Z軸旋轉)
那麼我們先在html用一個div做一個杯子,下面是div的樣式代碼
div {
margin: 300px auto;
width: 200px;
height: 300px;
border-radius: 0 0 20px 20px;
border: 3px solid black;
border-top: none;
position: relative;
background-color: skyblue;
overflow: hidden;
}
然後通過溢出隱藏,使用僞元素(before,after)製作白色區域:是兩個橢圓(此處我先把邊框顯示出來易於觀察)
div::before,
div::after {
content: '';
position: absolute;
width: 300px;
height: 270px;
border-radius: 55% 45%;
bottom: 33%;
left: 50%;
border: 1px solid black;
transform: translateX(-50%);
background-color: #fff;
animation: rotate 5s linear infinite;
}
div::after {
left: 47%;
bottom: 30%;
border-radius: 45% 50%;
opacity: 0.3;
}
通過定位(絕對定位)讓兩個橢圓錯開,然後僞元素after降低一下透明度,然後使用溢出隱藏
把最後添加動畫(隨便把橢圓的邊框樣式去掉)
@keyframes rotate {
0% {
transform: translate(-50%) rotateZ(0deg);
}
100% {
transform: translate(-50%) rotateZ(360deg);
}
這樣就完成了, 如果還是不怎麼清楚那個波浪的軌跡怎麼來的,可以把溢出隱藏先註釋掉,觀察兩個橢圓的轉動軌跡
下面是源碼:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div {
margin: 300px auto;
width: 200px;
height: 300px;
border-radius: 0 0 20px 20px;
border: 3px solid black;
border-top: none;
position: relative;
background-color: skyblue;
overflow: hidden;
}
div::before,
div::after {
content: '';
position: absolute;
width: 300px;
height: 270px;
border-radius: 55% 45%;
bottom: 33%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
animation: rotate 5s linear infinite;
}
div::after {
left: 47%;
bottom: 30%;
border-radius: 45% 50%;
opacity: 0.3;
}
@keyframes rotate {
0% {
transform: translate(-50%) rotateZ(0deg);
}
100% {
transform: translate(-50%) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>