CodePen Embed - QMZXQz

<div class="page">
  <h1>An animation from <a href="http://bitmotion-tab.com/">http://bitmotion-tab.com</a></h1>
<div class="container reversed">
    <style>
        .bubble {
            animation-duration: 8s;
            border-radius: 0;
        }
        .container.reversed .bubble {
            animation-duration: 8s;
        }
    </style>
  
  <div class="bubble-wrap">
      <!-- ngRepeat: i in 100 | range -->
    <div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range --><div class="bubble ng-scope" ng-repeat="i in 100 | range" <="" div="">
    </div><!-- end ngRepeat: i in 100 | range -->
</div>

</div>
</div>

body {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #111 url('https://www.knproject.io/images/blockchain/bg-whitepaper.png') no-repeat;
  background-size: cover;
  h1 {
    color: #fff;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    position: relative;
  }
}
.container {
  
  position: absolute;
  width: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
  top: 50%;
  margin-top: -320px; 
  
  @for $i from 1 through 100 {
    .bubble:nth-child(#{$i}){
      $size: random(30)*2+px;
      height: $size;
      width: $size;
      animation-delay: -$i * .2s;
      transform: translate3d( (random(1000) * 1px),  
        (random(1000) * 1px), -(random(2000) * 1px)) scale(0.2);
      background: hsl( random(360) , 70%, 50%);

      @if $i % 2 == 0 {
        border-radius: 100%;
      }
    }
  }
}



.bubble-wrap {
  margin: 0 auto;
  width: 720px;
  height: 500px;
  transform-style: preserve-3d;
  transform-origin: center center;
  perspective: 600px;
  &.paused {
	  .bubble {
		  animation-play-state: paused;
	  }
  }
}
.bubble {
  position: absolute;
  background: black;
  opacity: .7;
  border-radius: 50%;
  animation: move 3s infinite;
  //animation: reverseMove 3s infinite;
}
.reversed .bubble {
  animation: reverseMove 3s infinite;
}

@for $i from 1 through 100 {
  .bubble:nth-child(#{$i}){
     $size: random(30)*2+px;
     height: $size;
     width: $size;
     animation-delay: -$i * .2s;
     transform: translate3d( (random(1000) * 1px),  (random(1000) * 1px), (random(2000) * 1px)) scale(0.2);
     background: hsl( random(360) , 70%, 50%);
  }
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, -1000px);
  }
}
@keyframes reverseMove {
  100% {
    transform: translate3d(0, 0, 2000px);
  }
}

View Compiled

This Pen is owned by Peter Do on CodePen.

See more by @mrtuanphong on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.