上代码：
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>天空飘着五朵云</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 body {
14 overflow: hidden;
15 }
16
17 #clouds {
18 padding: 100px 0;
19 background: #c9dbe9;
20 background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
21 }
22
23 .cloud {
24 width: 200px;
25 height: 60px;
26 background: #fff;
27 border-radius: 200px;
28 position: relative;
29 }
30
31 .cloud:before,
32 .cloud:after {
33 content: ‘‘;
34 background: #fff;
35 width: 100px;
36 height: 80px;
37 position: absolute;
38 top: -15px;
39 left: 10px;
40 border-radius: 100px;
41 transform: rotate(30deg);
42 }
43
44 .cloud:after {
45 width: 120px;
46 height: 120px;
47 top: -55px;
48 right: 15px;
49 left: auto;
50 }
51
52 .x1 {
53 animation: moveclouds 15s linear infinite;
54 }
55
56 .x2 {
57 left: 200px;
58 transform: scale(0.6);
59 opacity: 0.6;
60 animation: moveclouds 25s linear infinite;
61 }
62
63 .x3 {
64 left: -250px;
65 top: -200px;
66 transform: scale(0.8);
67 opacity: 0.8;
68 animation: moveclouds 20s linear infinite;
69 }
70
71 .x4 {
72 left: 470px;
73 top: -250px;
74 transform: scale(0.75);
75 opacity: 0.75;
76 animation: moveclouds 18s linear infinite;
77 }
78
79 .x5 {
80 left: 350px;
81 top: -150px;
82 transform: scale(0.8);
83 opacity: 0.8;
84 animation: moveclouds 20s linear infinite;
85 }
86
87 @keyframes moveclouds {
88 0% {
89 margin-left: 1000px;
90 }
91 100% {
92 margin-left: -1000px;
93 }
94 }
95 </style>
96
97 </head>
98
99 <body>
100 <div id="clouds">
101 <div class="cloud x1"></div>
102 <div class="cloud x2"></div>
103 <div class="cloud x3"></div>
104 <div class="cloud x4"></div>
105 <div class="cloud x5"></div>
106 </div>
107
108 </body>
109
110 </html>
时间： 2024-10-12 17:31:25