css3如何向上_html5 – 使用CSS3不断向上动画气泡？

见下图：

在后台查看那些透明圆圈？我想要做的是让它们从下往上动画,然后手动跳下(屏幕外)并重新开始动画.圆圈很简单< span>具有border-radius的元素可以产生圆形效果.

这可能与CSS3有关,还是我需要javascript？如果可能的话,我也希望在向上移动的同时在X范围内随机移动圆圈.我会想象随机性需要javascript吗？

如果可能的话,我会很感激有关如何制作它的一些建议/想法.如果不能用CSS,Javascript库也是受欢迎的！

解决方法

这是一个纯粹的CSS

demonstration(改编自

tutorial),它依赖于动画属性.更新：感谢TonioElGringo,现在气泡也会向侧面移动,虽然运动是有节奏的,而不是随机的：

html,body,#bubbles { height: 100% }

body { overflow: hidden }

#bubbles { padding: 100px 0 }

.bubble {

width: 60px;

height: 60px;

background: #ffb200;

border-radius: 200px;

-moz-border-radius: 200px;

-webkit-border-radius: 200px;

position: absolute;

}

.x1 {

-webkit-transform: scale(0.9);

-moz-transform: scale(0.9);

transform: scale(0.9);

opacity: