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/