CSS實現水波浪效果(附gif圖及源碼)

不多說先上圖,如下圖
在這裏插入圖片描述
其實上圖實現的水波浪的效果並不是讓藍色部分的水動,而是使白色區域變化(讓兩個橢圓繞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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章