天空飘着五朵云

Posted 2020-08-27 a-ling

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了天空飘着五朵云相关的知识，希望对你有一定的参考价值。

上代码：

  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>

以上是关于天空飘着五朵云的主要内容，如果未能解决你的问题，请参考以下文章

华为徐直军：华为云成为智能世界五朵云之一，2021年大力支持伙伴持续创新