使发光的气泡平稳地水平移动

时间：2018-01-03 01:46:49

标签： html css

我需要这些发光的气泡像宇宙中的星系一样平稳地移动。

这里有四个气泡向上移动，我似乎无法让它们像中心的星系缩放（1）一样在圆形中移动，同时移动到右上方并进入深空并减少缩放（0.3）并且在向正确的方向移动时，＆＃34;类似的东西＆＃34;。

我们如何在纯CSS中做到这一点？

css/html glowing bubbles

发光泡泡代码

＆＃13;
＆＃13; 
body {
  background: #26323e;
}

@keyframes greenPulse {
  0% {
    box-shadow: 0 0 30px #4bbec8
  }
  50% {
    box-shadow: 0 0 80px #4bbec8
  }
  100% {
    box-shadow: 0 0 30px #4bbec8
  }
}

@-webkit-keyframes greenPulse {
  0% {
    -webkit-box-shadow: 0 0 30px #4bbec8
  }
  50% {
    -webkit-box-shadow: 0 0 80px #4bbec8
  }
  100% {
    -webkit-box-shadow: 0 0 30px #4bbec8
  }
}

@-moz-keyframes greenPulse {
  0% {
    -moz-box-shadow: 0 0 30px #4bbec8
  }
  50% {
    -moz-box-shadow: 0 0 80px #4bbec8
  }
  100% {
    -moz-box-shadow: 0 0 30px #4bbec8
  }
}

@-o-keyframes greenPulse {
  0% {
    -o-box-shadow: 0 0 30px #4bbec8
  }
  50% {
    -o-box-shadow: 0 0 80px #4bbec8
  }
  100% {
    -o-box-shadow: 0 0 30px #4bbec8
  }
}

@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
  }
}

@-webkit-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
  }
}

@-moz-keyframes bubbleUp {
  0% {
    bottom: 110px;
    -moz-transform: scale(.9);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -moz-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -moz-transform: scale(.8);
    opacity: 1
  }
  95% {
    bottom: 545px;
    -moz-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 550px;
    -moz-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -moz-transform: scale(.9);
    opacity: 0
  }
}

@-o-keyframes bubbleUp {
  0% {
    bottom: 110px;
    -o-transform: scale(.9);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -o-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -o-transform: scale(.8);
    opacity: 1
  }
  95% {
    bottom: 545px;
    -o-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 550px;
    -o-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -o-transform: scale(.9);
    opacity: 0
  }
}

@keyframes bubbleUp1 {
  0% {
    bottom: 120px;
    transform: scale(.3);
    opacity: 0
  }
  1% {
    bottom: 80px;
    transform: scale(.2);
    opacity: 0
  }
  30% {
    bottom: 90px;
    transform: scale(.2);
    opacity: 1
  }
  95% {
    bottom: 500px;
    transform: scale(.4);
    opacity: 1
  }
  99% {
    bottom: 550px;
    transform: scale(.2);
    opacity: 0
  }
  100% {
    bottom: 140px;
    transform: scale(.9);
    opacity: 0
  }
}

@-webkit-keyframes bubbleUp1 {
  0% {
    bottom: 120px;
    -webkit-transform: scale(.3);
    opacity: 0
  }
  1% {
    bottom: 80px;
    -webkit-transform: scale(.2);
    opacity: 0
  }
  30% {
    bottom: 90px;
    -webkit-transform: scale(.2);
    opacity: 1
  }
  95% {
    bottom: 500px;
    -webkit-transform: scale(.4);
    opacity: 1
  }
  99% {
    bottom: 550px;
    -webkit-transform: scale(.2);
    opacity: 0
  }
  100% {
    bottom: 140px;
    -webkit-transform: scale(.9);
    opacity: 0
  }
}

@-moz-keyframes bubbleUp1 {
  0% {
    bottom: 120px;
    -moz-transform: scale(.3);
    opacity: 0
  }
  1% {
    bottom: 80px;
    -moz-transform: scale(.2);
    opacity: 0
  }
  30% {
    bottom: 90px;
    -moz-transform: scale(.2);
    opacity: 1
  }
  95% {
    bottom: 500px;
    -moz-transform: scale(.4);
    opacity: 1
  }
  99% {
    bottom: 550px;
    -moz-transform: scale(.2);
    opacity: 0
  }
  100% {
    bottom: 140px;
    -moz-transform: scale(.9);
    opacity: 0
  }
}

@-o-keyframes bubbleUp1 {
  0% {
    bottom: 120px;
    -o-transform: scale(.3);
    opacity: 0
  }
  1% {
    bottom: 80px;
    -o-transform: scale(.2);
    opacity: 0
  }
  30% {
    bottom: 90px;
    -o-transform: scale(.2);
    opacity: 1
  }
  95% {
    bottom: 500px;
    -o-transform: scale(.4);
    opacity: 1
  }
  99% {
    bottom: 550px;
    -o-transform: scale(.2);
    opacity: 0
  }
  100% {
    bottom: 140px;
    -o-transform: scale(.9);
    opacity: 0
  }
}

@keyframes bubbleUp2 {
  0% {
    bottom: 110px;
    transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 650px;
    transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 655px;
    transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    transform: scale(1);
    opacity: 0
  }
}

@-webkit-keyframes bubbleUp2 {
  0% {
    bottom: 110px;
    -webkit-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -webkit-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 650px;
    -webkit-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 655px;
    -webkit-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -webkit-transform: scale(1);
    opacity: 0
  }
}

@-moz-keyframes bubbleUp2 {
  0% {
    bottom: 110px;
    -moz-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -moz-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -moz-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 650px;
    -moz-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 655px;
    -moz-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -moz-transform: scale(1);
    opacity: 0
  }
}

@-o-keyframes bubbleUp2 {
  0% {
    bottom: 110px;
    -o-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -o-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -o-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 650px;
    -o-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 655px;
    -o-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -o-transform: scale(1);
    opacity: 0
  }
}

@keyframes bubbleUp3 {
  0% {
    bottom: 110px;
    transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 495px;
    transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 500px;
    transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    transform: scale(1);
    opacity: 0
  }
}

@-webkit-keyframes bubbleUp3 {
  0% {
    bottom: 110px;
    -webkit-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -webkit-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 495px;
    -webkit-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 500px;
    -webkit-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -webkit-transform: scale(1);
    opacity: 0
  }
}

@-moz-keyframes bubbleUp3 {
  0% {
    bottom: 110px;
    -moz-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -moz-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -moz-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 495px;
    -moz-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 500px;
    -moz-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -moz-transform: scale(1);
    opacity: 0
  }
}

@-o-keyframes bubbleUp3 {
  0% {
    bottom: 110px;
    -o-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -o-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -o-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 495px;
    -o-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 500px;
    -o-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -o-transform: scale(1);
    opacity: 0
  }
}

@keyframes bubbleUp4 {
  0% {
    bottom: 110px;
    transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 595px;
    transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 600px;
    transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    transform: scale(1);
    opacity: 0
  }
}

@-webkit-keyframes bubbleUp4 {
  0% {
    bottom: 110px;
    -webkit-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -webkit-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 595px;
    -webkit-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 600px;
    -webkit-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -webkit-transform: scale(1);
    opacity: 0
  }
}

@-moz-keyframes bubbleUp4 {
  0% {
    bottom: 110px;
    -moz-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -moz-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -moz-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 595px;
    -moz-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 600px;
    -moz-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -moz-transform: scale(1);
    opacity: 0
  }
}

@-o-keyframes bubbleUp4 {
  0% {
    bottom: 110px;
    -o-transform: scale(1);
    opacity: 0
  }
  1% {
    bottom: 110px;
    -o-transform: scale(.3);
    opacity: 0
  }
  30% {
    bottom: 110px;
    -o-transform: scale(.9);
    opacity: 1
  }
  95% {
    bottom: 595px;
    -o-transform: scale(.3);
    opacity: 1
  }
  99% {
    bottom: 600px;
    -o-transform: scale(3);
    opacity: 0
  }
  100% {
    bottom: 110px;
    -o-transform: scale(1);
    opacity: 0
  }
}

div#beaker {
  width: 300px;
  height: 700px;
  margin: 0 auto;
  position: relative
}

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;
}

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;
}

div#beaker span.bubble1 {
  background: #fff;
  width: 70px;
  height: 70px;
  position: absolute;
  display: block;
  left: 115px;
  bottom: 110px;
  border-radius: 80px;
  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: -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 5s infinite;
  -webkit-animation: bubbleUp1 5s infinite;
  -o-animation: bubbleUp1 5s infinite;
  -moz-animation: bubbleUp1 5s infinite;
}

div#beaker span.bubble2 {
  background: #fff;
  width: 30px;
  height: 30px;
  position: absolute;
  display: block;
  left: 110px;
  bottom: 110px;
  border-radius: 60px;
  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: -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 7s infinite;
  -webkit-animation: bubbleUp2 7s infinite;
  -o-animation: bubbleUp2 7s infinite;
  -moz-animation: bubbleUp2 7s infinite;
}

div#beaker span.bubble3 {
  background: #fff;
  width: 50px;
  height: 50px;
  position: absolute;
  display: block;
  left: 140px;
  bottom: 95px;
  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: -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 10s infinite;
  -webkit-animation: bubbleUp3 10s infinite;
  -o-animation: bubbleUp3 10s infinite;
  -moz-animation: bubbleUp3 10s infinite;
}

div#beaker span.bubble4 {
  background: #fff;
  width: 40px;
  height: 40px;
  position: absolute;
  display: block;
  left: 155px;
  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: -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: bubbleUp4 12s infinite;
  -webkit-animation: bubbleUp4 12s infinite;
  -o-animation: bubbleUp4 12s infinite;
  -moz-animation: bubbleUp4 12s infinite;
}
＆＃13; 
<div id="lab">
  <div id="beaker"> 
    <span class="bubble"><span class="glow"></span></span>
    <span class="bubble1"><span class="glow"></span></span> 
    <span class="bubble2"><span class="glow"></span></span> 
    <span class="bubble3"><span class="glow"></span></span> 
    <span class="bubble4"><span class="glow"></span></span>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我的jsfiddle https://jsfiddle.net/pbged09z/

0 个答案:

没有答案
相关问题
最新问题