动态云层html代码，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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态云层</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .cloud {
            position: absolute;
            background: no-repeat center/contain;
        }

        @keyframes moveCloud {
            0% {
                transform: translate3d(-100%, 0, 0);
            }
            25% {
                transform: translate3d(calc(-50% + (random(20) - 10) * 1%), calc((random(20) - 10) * 1%), 0);
            }
            50% {
                transform: translate3d(0, calc((random(20) - 10) * 1%), 0);
            }
            75% {
                transform: translate3d(calc(50% + (random(20) - 10) * 1%), calc((random(20) - 10) * 1%), 0);
            }
            100% {
                transform: translate3d(100%, 0, 0);
            }
        }

        @keyframes fadeInOut {
            0%, 100% {
                opacity: random(0.1, 0.3);
            }
            25% {
                opacity: random(0.3, 0.5);
            }
            50% {
                opacity: random(0.5, 0.7);
            }
            75% {
                opacity: random(0.3, 0.5);
            }
        }

        @keyframes rotateCloud {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes reverseMove {
            0% {
                transform: translate3d(100%, 0, 0);
            }
            100% {
                transform: translate3d(-100%, 0, 0);
            }
        }

        @keyframes complexMove {
            0% {
                transform: translate3d(-100%, 0, 0);
            }
            25% {
                transform: translate3d(-50%, calc((random(20) - 10) * 1%), 0);
            }
            50% {
                transform: translate3d(0, calc((random(20) - 10) * 1%), 0);
            }
            75% {
                transform: translate3d(50%, calc((random(20) - 10) * 1%), 0);
            }
            100% {
                transform: translate3d(100%, 0, 0);
            }
        }

        /* 模拟 random 函数，实际使用时可根据需要调整 */
        @property --random {
            syntax: '<number>';
            initial-value: 0;
            inherits: false;
        }

        @keyframes randomize {
            from {
                --random: 0;
            }
            to {
                --random: 1;
            }
        }
    </style>
</head>

<body class="bg-sky-500 relative overflow-hidden">
    <!-- 动态生成云层 -->
    <script>
        const numClouds = 50; // 增加云层数量
        const sky = document.body;
        const cloudImages = [
            'https://s21.ax1x.com/2025/04/12/pERID61.png',
        ];

        for (let i = 0; i < numClouds; i++) {
            const cloud = document.createElement('div');
            cloud.classList.add('cloud');

            const randomImageIndex = Math.floor(Math.random() * cloudImages.length);
            cloud.style.backgroundImage = `url('${cloudImages[randomImageIndex]}')`;

            const size = Math.floor(Math.random() * 120) + 30; // 增大云层大小范围
            cloud.style.width = `${size}rem`;
            cloud.style.height = `${size * 0.5}rem`;

            const top = Math.floor(Math.random() * 100); // 让云层可以覆盖整个垂直范围
            cloud.style.top = `${top}vh`;

            const left = Math.floor(Math.random() * 100); // 让云层可以从不同水平位置开始
            cloud.style.left = `${left}vw`;

            const opacity = Math.random() * 0.8 + 0.1; // 调整透明度范围
            cloud.style.opacity = opacity;

            const speed = Math.floor(Math.random() * 50) + 20; // 调整移动速度范围
            const delay = Math.floor(Math.random() * 20);

            const animationTypes = ['moveCloud', 'complexMove', 'reverseMove'];
            const randomAnimationIndex = Math.floor(Math.random() * animationTypes.length);
            const animationType = animationTypes[randomAnimationIndex];

            // 随机决定是否旋转
            const shouldRotate = Math.random() < 0.5;
            if (shouldRotate) {
                cloud.style.animation = `${animationType} ${speed}s ${delay}s infinite, fadeInOut 10s ease-in-out infinite, rotateCloud ${Math.floor(Math.random() * 60) + 30}s linear infinite`;
            } else {
                cloud.style.animation = `${animationType} ${speed}s ${delay}s infinite, fadeInOut 10s ease-in-out infinite`;
            }

            sky.appendChild(cloud);
        }
    </script>
</body>

</html>
编辑器加载中