Skip to main content

css下雨特效

实现效果​

源代码​

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css Raining</title>
</head>

<body>
    <div class="container">
        <div class="rain">
            <span style="--speed:15"></span>
            <span style="--speed:11"></span>
            <span style="--speed:16"></span>
            <span style="--speed:17"></span>
            <span style="--speed:17"></span>
            <span style="--speed:18"></span>
            <span style="--speed:13"></span>
            <span style="--speed:14"></span>
            <span style="--speed:13"></span>
            <span style="--speed:11"></span>
            <span style="--speed:13"></span>
            <span style="--speed:19"></span>
            <span style="--speed:13"></span>
            <span style="--speed:15"></span>
            <span style="--speed:17"></span>
            <span style="--speed:16"></span>
        </div>
    </div>
</body>
<style>
    body {
        background-color: midnightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 90vh;
    }

    .container {
        /*云的基础底部，一条圆角直线*/
        position: relative;
        width: 110px;
        height: 30px;
        background-color: aliceblue;
        border-radius: 100px;
    }

    /* :before 选择器在被选元素的内容前面插入内容。使用 content 属性来指定要插入的内容。 */
    /*云上的云角*/
    .container::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 10px;
        width: 30px;
        height: 30px;
        background-color: aliceblue;
        border-radius: 50%;
        box-shadow: 40px 0 0 20px aliceblue;
    }

    .rain {
        position: relative;
        display: flex;
        z-index: 1;
    }

    /*雨滴*/
    .rain span {
        position: relative;
        width: 3px;
        height: 3px;
        background-color: aliceblue;
        /*雨滴间距*/
        margin: 10px 2px;
        border-radius: 50%;
        animation: rain 5s linear infinite;
        /*核心代码*/
        animation-duration: calc(15s / var(--speed));
        transform-origin: bottom;
    }

    /*雨滴动画*/
    @keyframes rain {
        0% {
            transform: translateY(0);
        }

        70% {
            transform: translateY(100px) scale(1);
        }

        100% {
            transform: translateY(100px) scale(0);
        }
    }
</style>

</html>

要点​

伪类 before​

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

在这里，使用这个伪元素为云添加上面的弧形角。

先用普通样式绘制一条圆角矩形。 

    .container {
        /*云的基础底部，一条圆角直线*/
        position: relative;
        width: 110px;
        height: 30px;
        background-color: aliceblue;
        border-radius: 100px;
    }

1

再使用伪类绘制上面的圆角。 

    .container::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 10px;
        width: 30px;
        height: 30px;
        background-color: aliceblue;
        border-radius: 50%;
        box-shadow: 40px 0 0 20px aliceblue;
    }

1

transform-origin​

transform-origin CSS 属性让你更改一个元素变形的原点。
在这里设置变换中心为底部。

calc 属性​

calc 用于计算出属性值。在 css 中可以定义一些变量，在这里我们定义了一个下落速度变量，这些雨点是通过同一个 css class 控制的，而为了使他们不同时下落，所以我们在每行 span 中重新定义这个 --speed 的值，达到不同速的效果。 

    .rain span {
        /* ... */
        animation: rain 5s linear infinite;
        /*核心代码*/
        animation-duration: calc(15s / var(--speed));
        transform-origin: bottom;
    }
<div class="rain">
            <span style="--speed:15"></span>
            <span style="--speed:11"></span>
            <span style="--speed:16"></span>
            <span style="--speed:17"></span>
            <span style="--speed:17"></span>
            <span style="--speed:18"></span>
            <span style="--speed:13"></span>
            <span style="--speed:14"></span>
            <span style="--speed:13"></span>
            <span style="--speed:11"></span>
            <span style="--speed:13"></span>
            <span style="--speed:19"></span>
            <span style="--speed:13"></span>
            <span style="--speed:15"></span>
            <span style="--speed:17"></span>
            <span style="--speed:16"></span>
        </div>