gpt4 book ai didi

html - 使用 CSS3 连续向上动画气泡?

转载 作者:太空狗 更新时间:2023-10-29 13:33:38 24 4
gpt4 key购买 nike

见下图:

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

看到背景中那些透明的圆圈了吗?我想要做的是让它们从下往上动画,然后手动跳下(离开屏幕)并重新启动动画。圆圈很简单<span>带有 border-radius 的元素制作圆圈效果。

这可能与 CSS3 相关,还是我需要 JavaScript?如果可能的话,我还想在向上移动的同时在 X 范围内随机向侧面移动圆圈。我想随机性需要 javascript?

如果可能的话,我会很感激一些关于如何制作它的建议/想法。如果不能使用 CSS,也欢迎使用 Javascript 库!

最佳答案

这是一个纯CSS demonstration (改编自此 tutorial )依赖于 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;
}
}

关于html - 使用 CSS3 连续向上动画气泡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13953053/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com