上代码：
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>