下雨小雲動畫

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

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

相关阅读:
Windows系统电脑本地部署AI音乐创作工具并实现无公网IP远程使用
 (3)MyBatis-Plus待开发
 宝塔部署nginx遇到的400错误和502错误
 IDEA中使用Git
HTML+CSS网页设计期末课程大作业【茶叶文化网站设计题材】web前端开发技术 web课程设计网页规划与设计
 Linux-v10.0 笔记（一）
打开带密码的 word excel
【数学建模】2023 深圳杯 & 东三省数学建模 B 题：电子资源版权保护问题（含源代码 & 最终论文）
查找并删除指定文件夹下包含有指定的关键词的文件（GUI界面）
开源软件的影响力及未来发展趋势
原文地址：https://blog.csdn.net/weixin_44368963/article/details/126186758