CSS3动画泡泡背景

Question

我遇到了一个问题，就是将本教程改为我可以用来实现的内容。 http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

我想将云层变成泡沫，让它从底部到顶部而不是从左到右。

它是做一些很奇怪的，虽然背景...任何人都可以帮我找出为什么它与气泡我只希望它移动的气泡，并留下我的BG固定

沿着移动BG梯度这里是我的CSS

  body { 
       /*To hide the horizontal scroller appearing during the animation*/ 
       overflow: hidden; 
       background-image: linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%); 
      background-image: -o-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%); 
      background-image: -moz-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%); 
      background-image: -webkit-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%); 
      background-image: -ms-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%); 

      background-image: -webkit-gradient(
       linear, 
       left bottom, 
       left top, 
       color-stop(0.21, #14C3F4), 
       color-stop(0.9, #FCFCFC)); 
      } 

      #clouds{ 
       padding: 100px 0; 
      /* background: #c9dbe9; 
       background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%); 
       background: -linear-gradient(top, #c9dbe9 0%, #fff 100%); 
       background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);*/ 
      } 

      /*Time to finalise the cloud shape*/ 
      .cloud { 
       width: 60px; height: 60px; 
       background: #fff; 

       border-radius: 200px; 
       -moz-border-radius: 200px; 
       -webkit-border-radius: 200px; 

       position: relative; 
      } 



      /*Time to animate*/ 
      .x1 { 
       -webkit-animation: moveclouds 15s linear infinite; 
       -moz-animation: moveclouds 15s linear infinite; 
       -o-animation: moveclouds 15s linear infinite; 
      } 

      /*variable speed, opacity, and position of clouds for realistic effect*/ 
      .x2 { 
       left: 200px; 

       -webkit-transform: scale(0.6); 
       -moz-transform: scale(0.6); 
       transform: scale(0.6); 
       opacity: 0.6; /*opacity proportional to the size*/ 

       /*Speed will also be proportional to the size and opacity*/ 
       /*More the speed. Less the time in 's' = seconds*/ 
       -webkit-animation: moveclouds 25s linear infinite; 
       -moz-animation: moveclouds 25s linear infinite; 
       -o-animation: moveclouds 25s linear infinite; 
      } 

      .x3 { 
       left: 350px; 

       -webkit-transform: scale(0.8); 
       -moz-transform: scale(0.8); 
       transform: scale(0.8); 
       opacity: 0.8; /*opacity proportional to the size*/ 

       -webkit-animation: moveclouds 20s linear infinite; 
       -moz-animation: moveclouds 20s linear infinite; 
       -o-animation: moveclouds 20s linear infinite; 
      } 

      .x4 { 
       left: 470px; 

       -webkit-transform: scale(0.75); 
       -moz-transform: scale(0.75); 
       transform: scale(0.75); 
       opacity: 0.75; /*opacity proportional to the size*/ 

       -webkit-animation: moveclouds 18s linear infinite; 
       -moz-animation: moveclouds 18s linear infinite; 
       -o-animation: moveclouds 18s linear infinite; 
      } 

      .x5 { 
       left: 150px; 

       -webkit-transform: scale(0.8); 
       -moz-transform: scale(0.8); 
       transform: scale(0.8); 
       opacity: 0.8; /*opacity proportional to the size*/ 

       -webkit-animation: moveclouds 20s linear infinite; 
       -moz-animation: moveclouds 20s linear infinite; 
       -o-animation: moveclouds 20s linear infinite; 
      } 

      @-webkit-keyframes moveclouds { 
       0% {margin-bottom: 1000px;} 
       100% {margin-bottom: -1000px;} 
      } 
      @-moz-keyframes moveclouds { 
       0% {margin-bottom: 1000px;} 
       100% {margin-bottom: -1000px;} 
      } 
      @-o-keyframes moveclouds { 
       0% {margin-bottom: 1000px;} 
       100% {margin-bottom: -1000px;} 
      } 

而我的HTML

  <div id="clouds"> 
       <div class="cloud x1"></div> 
       <!-- Time for multiple clouds to dance around --> 
       <div class="cloud x2"></div> 
       <div class="cloud x3"></div> 
       <div class="cloud x4"></div> 
       <div class="cloud x5"></div> 
      </div> 

Answer 1

的#clouds作为气泡向上移动正在崩溃。这崩溃了链中的身体。这导致背景重复，因此怪异的背景错误。

增加100％高度，HTML，身体和#clouds解决问题

这里是一个演示： http://jsfiddle.net/Fmy7F/1/