logo标签列表

如何使用CSS3让气泡持续向上运动？

htmlcssrepeatcss-animationscontinuous
9

请看下面的图片：

http://i.imgur.com/3vTrB.png

看到背景中那些透明的圆圈了吗？我想要做的是让它们从底部向上运动，然后手动跳下（离开屏幕）并重新开始动画。这些圆圈是简单的 <span> 元素，使用 border-radius 实现圆形效果。

这可以用 CSS3 来实现吗，还是需要 JavaScript？如果可以的话，我还想让圆圈在 X 轴范围内随机左右移动。我想这个随机性可能需要 JavaScript 吧？

如果可能的话，我希望能得到一些关于如何制作它的建议/想法。如果用 CSS 不行，JavaScript 库也可以！

你能否提供一个 jsFiddle 进行测试？ - Asad Saeeduddin
目前我只有“静态”气泡的HTML和CSS，还没有添加任何动画。 - qwerty
没问题，这样我们就有了一个起点。 - Asad Saeeduddin
3个回答
29

这里有一个纯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;
    }
}
谢谢，看起来非常有前途！我现在正在工作，所以几个小时后我会更深入地研究它。 - qwerty
5
我刚刚尝试了一下，加入了抖动效果（只是在“margin-left”上进行了无限交替的动画）：http://jsfiddle.net/zr7sb/10/（除了webkit以外，我没有添加其他支持，只是将所有内容复制粘贴了3次...） - TonioElGringo
提醒：对于持续时间超过1秒的CSS动画，它们会极大地消耗CPU资源，尤其是在移动设备和旧电脑上。考虑切换到基于JS的动画，因为它可以更有效地管理资源。 - FredTheWebGuy
很好的例子，但不幸的是它似乎不能在IE10上运行。 - Jerome Provensal
1
我最终让它在IE10上工作了。请在此处查看演示：http://jsfiddle.net/p5gpx/629/ - Jerome Provensal
2
我用纯CSS创建了一个非常漂亮的工作示例：
```html

我用纯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;
}
0
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Bubble Effect Create Using HTML and CSS</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            /* background-color: #00ff00; */
            background-image: linear-gradient(#00ff00,#00ff11,#11ee10);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        .box h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            justify-content: space-between;
        }

        .bubble-box {
            display: flex;
            position: absolute;
            justify-content: space-around;
            align-items: center;
            bottom: -20%;
            width: 100%;
        }

        .bubble {
            width: 50px;
            animation: bubble 5s linear infinite;
        }


        .bubble:nth-child(1) {
            animation-delay: 2s;
            width: 40px;
        }

        .bubble:nth-child(2) {
            animation-delay: 3s;
            width: 60px;
        }

        .bubble:nth-child(3) {
            animation-delay: 1s;
            width: 30px;
        }

        .bubble:nth-child(4) {
            animation-delay: 5s;
            width: 35px;
        }

        .bubble:nth-child(5) {
            animation-delay: 4s;
            width: 70px;
        }

        @keyframes bubble {
            0% {
                transform: translateY(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: translateY(-80vh);
                opacity: 0;
            }
        }
    </style>
</head>
    <body>
        <div class="box">
            <div class="bubble-box">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
            </div>
        </div>
    </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接