下雨小雲動畫

效果圖
在这里插入图片描述

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>下雨的白云title>
    <style>
        body {
            background-color: #212121;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 90vh;
        }

        .container {
            position: relative;
            width: 110px;
            height: 30px;
            background-color: #fff;
            border-radius: 100px;
            box-shadow: 0 -3px 13px #fff;
            animation: glow 5s linear infinite;
        }

        .container::before {
            content: "";
            position: absolute;
            top: -20px;
            left: 10px;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 1px -3px 13px #fff;
            animation: glow 5s linear infinite;
        }

        .container::after {
            content: "";
            position: absolute;
            top: -40px;
            left: 30px;
            width: 70px;
            height: 70px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 1px -3px 13px #fff;
            animation: glow 5s ease-in-out infinite;
        }

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

        .rain span {
            position: relative;
            top: 15px;
            width: 3px;
            height: 3px;
            background-color: #fff;
            margin: 10 2px;
            border-radius: 50%;
            animation: rain 5s linear infinite;
            animation-duration: calc(15s/var(--raindrop));
            transform-origin: bottom;
        }

        @keyframes glow {

            0%,
            100% {
                box-shadow: 1px -3px 3px #fff;
            }

            50% {
                box-shadow: 1px -3px 13px #fff;
            }
        }

        @keyframes rain {
            0% {
                opacity: 1;
                height: 3px;
                transform: translateY(0);
            }

            70% {
                height: 5px;
                opacity: .75;
                transform: translateY(100px);
            }

            85% {
                height: 3px;
                opacity: 1;
            }

            100% {
                height: 2px;
                opacity: 0;
                transform: translateY(100px);
                box-shadow: 0 -3px 3px #fff;
            }
        }
    style>
head>

<body>
    <div class="container">
    div>
    <script>
        var box = document.getElementsByClassName('container')[0];
        var rainBox = document.createElement('div');
        rainBox.classList = 'rain';
        box.appendChild(rainBox);
        for (let index = 0; index < 35; index++) {
            var raindrop = document.createElement('span');
            var a = Math.random() * (25 - 15) + 15;
            console.log(a)
            raindrop.style = '--raindrop:' + a + ';';
            rainBox.appendChild(raindrop);
        }

    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

相关阅读:
ALV中如何添加搜索帮助
 AIE双三唑桥联荧光环糊精分子/β-环糊精包覆肼二水杨腙聚集诱导发光微球的制备
 JavaScript学习笔记四——数组对象
 vue3组件通信
 【入门】.Net Core 6 WebApi 项目搭建
 俄罗斯方块游戏开发教程5:形状碰撞检测(下)
投影仪怎么安装小容量软件？5款小体积应用下载搞定内存不足
 【论文笔记】基于预训练模型的持续学习（Continual Learning）（增量学习，Incremental Learning）
简单小游戏制作
 IDEA断点常用5种方式——条件断点（循环）、回退、表达式执行、中断（不执行后续代码）、指定异常（常用寻找空指针位置）
原文地址：https://blog.csdn.net/weixin_44368963/article/details/126186758