Javascript CSS3/Jquery气泡动画

我在codepen上找到了这幅作品，它是一幅气泡以随机速度向上漂浮的动画，给人一种真实的感觉，就像是在啤酒或苏打水杯中一样

基本上，我想用它作为我正在从事的一个项目的背景。虽然我需要加快它们的速度，但不要让它们中的一些移动得非常快，而另一些移动得相对缓慢

脚本使用math.random来生成速度，因为很明显，为了获得逼真的效果，它们都需要不同的速度，但我无法让它们以合适的速度相互协作。代码如下：

var $bubbles = $('.bubbles');

function bubbles() {

// Settings
var min_bubble_count = 20, // Minimum number of bubbles
  max_bubble_count = 40, // Maximum number of bubbles
  min_bubble_size = 3, // Smallest possible bubble diameter (px)
  max_bubble_size = 8; // Largest possible bubble diameter (px)

// Calculate a random number of bubbles based on our min/max
var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1));

// Create the bubbles
for (var i = 0; i < bubbleCount; i++) {
$bubbles.append('<div class="bubble-container"><div class="bubble"></div></div>');
}

// Now randomise the various bubble elements
$bubbles.find('.bubble-container').each(function(){

// Randomise the bubble positions (0 - 100%)
var pos_rand = Math.floor(Math.random() * 101);

// Randomise their size
var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1));

// Randomise the time they start rising (0-15s)
var delay_rand = Math.floor(Math.random() * 15);

// Randomise their speed (3-8s)
var speed_rand = 3 + Math.floor(Math.random() * 3);

// Cache the this selector
var $this = $(this);

// Apply the new styles
$this.css({
  'left' : pos_rand + '%',

  '-webkit-animation-duration' : speed_rand + 's',
  '-moz-animation-duration' : speed_rand + 's',
  '-ms-animation-duration' : speed_rand + 's',
  'animation-duration' : speed_rand + 's',

  '-webkit-animation-delay' : delay_rand + 's',
  '-moz-animation-delay' : delay_rand + 's',
  '-ms-animation-delay' : delay_rand + 's',
  'animation-delay' : delay_rand + 's'
});

$this.children('.bubble').css({
  'width' : size_rand + 'px',
  'height' : size_rand + 'px'
});

});
}

// In case users value their laptop battery life
// Allow them to turn the bubbles off
$('.bubble-toggle').click(function(){
if($bubbles.is(':empty')) {
bubbles();
$bubbles.show();
$(this).text('Bubbles Off');
} else {
$bubbles.fadeOut(function(){
  $(this).empty();
});
$(this).text('Bubbles On');
}

return false;
});

bubbles();

所以基本上我试着编辑这个部分：

// Randomise their speed (3-8s)
var speed_rand = 3 + Math.floor(Math.random() * 3);

为此：

// Randomise their speed (3-8s)
var speed_rand = 2 + Math.floor(Math.random() * 0.5);

---

它加快了气泡的移动速度，但它们同时从页面底部开始一起移动，这使它看起来不现实，有些气泡的移动速度也比其他气泡的移动速度快。

通过更改3->0.5，您降低了速度，但也降低了可变性（实际上，所有速度都相同，因为

Math.floor（Math.random（）*0.5）

始终为零）。您可能希望增加第一个值：

var speed_rand = 0.5 + Math.random() * 2;
                 ^                     ^
           min time: 0.5 sec      variability: add between 0 and 2 sec

---

如果您希望速度介于8-12s之间，我会尝试

var speed\u rand=Math.floor（（Math.random（）*（（12+1）-8））+8）这似乎更慢了？这里是链接，如果你想看到它的行动@JoshWade哦，我现在明白了。。。这是一个用词不当的问题，它的值实际上是时间，而不是速度…@JoshWade我会删除
Math.floor
，因为这限制了它们速度的可变性。例如，这似乎工作得更好：我知道这实际上已经解决了，但当我在一个基本的HTML页面上实现它时，它不会呈现？取而代之的是，页面底部只有方形块。这是我的分数（猛击一下：））在这个评论框里写太长了？
var speed_rand = 0.5 + Math.random() * 2;
                 ^                     ^
           min time: 0.5 sec      variability: add between 0 and 2 sec