Html 使用 CSS3 连续向上动画气泡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13953053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate bubbles upwards continuously with CSS3?
提问by qwerty
See the following image:
见下图：
See those transparent circles in the background? What i want to do is make them animate from the bottom up, and then manually jump down (off screen) and re-start the animation. The circles are simple <span>elements with border-radiusto make the circle effect.
看到背景中那些透明的圆圈了吗？我想要做的是让它们从下往上动画，然后手动跳下（屏幕外）并重新开始动画。圆圈是用来制作圆圈效果的简单<span>元素border-radius。
Is this possible to do with CSS3, or will i be needing javascript for that? I would also, if possible, like to move the circles randomly sideways within an X range while moving up. I would imagine the randomness would require javascript?
这可能与 CSS3 有关，还是我需要为此使用 javascript？如果可能的话，我还想在向上移动时在 X 范围内随机横向移动圆圈。我会想象随机性需要javascript吗？
If possible, i would appreciate some suggestions/ideas as for how to make it. If not possible with CSS, Javascript libraries is welcome as well!
如果可能的话，我会很感激一些关于如何制作的建议/想法。如果 CSS 无法实现，也欢迎使用 Javascript 库！
回答by Asad Saeeduddin
Here is a pure CSS demonstration(adapted from this tutorial) that relies on the animationproperty. Update: Thanks to TonioElGringo the bubbles now also move sideways, although the motion is rhythmic, not random:
这是一个依赖属性的纯 CSS演示（改编自本教程）animation。更新：多亏了 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: 0.2;
-webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
-o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.5;
-webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
-moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
-o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
left: 350px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
-webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
left: 470px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.35;
-webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
-o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
left: 150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
-webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds {
0% {
top: 500px;
}
100% {
top: -500px;
}
}
@-webkit-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-moz-keyframes moveclouds {
0% {
top: 500px;
}
100% {
top: -500px;
}
}
@-moz-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-o-keyframes moveclouds {
0% {
top: 500px;
}
100% {
top: -500px;
}
}
@-o-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
回答by Dhiraj
A very beautiful working exampleI have created with pure CSS : http://demo.web3designs.com/animated-bubble-upwards-continuously-with-pure-css.htm
我用纯 CSS 创建了一个非常漂亮的工作示例：http: //demo.web3designs.com/animated-bubble-upwards-continuously-with-pure-css.htm
CSS:
CSS：
@keyframes greenPulse {
0% {box-shadow:0 0 30px #4bbec8}
50% {box-shadow:0 0 80px #4bbec8}
100% {box-shadow:0 0 30px #4bbec8}
}
div#beaker span.glow {
width:100%;
height:100%;
background:##222;
position:relative;
display:block;
border-radius:200px;
animation:greenPulse 2s infinite;
-webkit-animation:greenPulse 2s infinite;
-moz-animation:greenPulse 2s infinite;
-o-animation:greenPulse 2s infinite;
}
@keyframes bubbleUp {
0% {bottom:110px;-webkit-transform:scale(.9);opacity:0}
1% {bottom:110px;-webkit-transform:scale(.3);opacity:0}
30% {bottom:110px;-webkit-transform:scale(.8);opacity:1}
95% {bottom:545px;-webkit-transform:scale(.3);opacity:1}
99% {bottom:550px;-webkit-transform:scale(3);opacity:0}
100% {bottom:110px;-webkit-transform:scale(.9);opacity:0}
}
div#beaker span.bubble {
background:#fff;
width:80px;
height:80px;
position:absolute;
display:block;
left:110px;
bottom:110px;
border-radius:100px;
background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
background:gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
animation:bubbleUp 4s infinite ease-in-out;
-webkit-animation:bubbleUp 4s infinite ease-in-out;
-o-animation:bubbleUp 4s infinite ease-in-out;
-moz-animation:bubbleUp 4s infinite ease-in-out;
}
