CSS Bubble Animation for Relax.

<!DOCTYPE html>
<html>

<body>

  <div class="container">
    <div class="bubble-wrap">
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
    </div>
  </div>

  <style>
    html,
    body {
      height: 100%;
    }
    
    body {
      background: black;
      min-height: 100%;
      overflow: hidden;
    }
    
    @-webkit-keyframes move {
      100% {
        -webkit-transform: translate3d(0, 0, -1000px);
        transform: translate3d(0, 0, -1000px);
      }
    }
    
    @keyframes move {
      100% {
        -webkit-transform: translate3d(0, 0, -1000px);
        transform: translate3d(0, 0, -1000px);
      }
    }
    
    .container {
      position: relative;
      width: 100%;
      min-height: 100%;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .bubble-wrap {
      margin: 0 auto;
      width: 500px;
      height: 500px;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-perspective: 600px;
      perspective: 600px;
    }
    
    .bubble {
      position: absolute;
      background: black;
      opacity: .7;
      border-radius: 50%;
      -webkit-animation: move 3s infinite;
      animation: move 3s infinite;
    }
    
    .bubble:nth-child(1) {
      height: 25px;
      width: 25px;
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
      -webkit-transform: translate3d(111px, 436px, 1030px);
      transform: translate3d(111px, 436px, 1030px);
      background: #71d926;
    }
    
    .bubble:nth-child(2) {
      height: 29px;
      width: 29px;
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
      -webkit-transform: translate3d(360px, 130px, 1984px);
      transform: translate3d(360px, 130px, 1984px);
      background: #d92680;
    }
    
    .bubble:nth-child(3) {
      height: 3px;
      width: 3px;
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
      -webkit-transform: translate3d(19px, 923px, 448px);
      transform: translate3d(19px, 923px, 448px);
      background: #afd926;
    }
    
    .bubble:nth-child(4) {
      height: 6px;
      width: 6px;
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
      -webkit-transform: translate3d(163px, 546px, 494px);
      transform: translate3d(163px, 546px, 494px);
      background: #a926d9;
    }
    
    .bubble:nth-child(5) {
      height: 26px;
      width: 26px;
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
      -webkit-transform: translate3d(164px, 269px, 1334px);
      transform: translate3d(164px, 269px, 1334px);
      background: #be26d9;
    }
    
    .bubble:nth-child(6) {
      height: 9px;
      width: 9px;
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s;
      -webkit-transform: translate3d(993px, 311px, 166px);
      transform: translate3d(993px, 311px, 166px);
      background: #2659d9;
    }
    
    .bubble:nth-child(7) {
      height: 26px;
      width: 26px;
      -webkit-animation-delay: -1.4s;
      animation-delay: -1.4s;
      -webkit-transform: translate3d(506px, 60px, 1470px);
      transform: translate3d(506px, 60px, 1470px);
      background: #2626d9;
    }
    
    .bubble:nth-child(8) {
      height: 18px;
      width: 18px;
      -webkit-animation-delay: -1.6s;
      animation-delay: -1.6s;
      -webkit-transform: translate3d(552px, 863px, 1976px);
      transform: translate3d(552px, 863px, 1976px);
      background: #d9b226;
    }
    
    .bubble:nth-child(9) {
      height: 6px;
      width: 6px;
      -webkit-animation-delay: -1.8s;
      animation-delay: -1.8s;
      -webkit-transform: translate3d(901px, 74px, 1056px);
      transform: translate3d(901px, 74px, 1056px);
      background: #d92668;
    }
    
    .bubble:nth-child(10) {
      height: 9px;
      width: 9px;
      -webkit-animation-delay: -2s;
      animation-delay: -2s;
      -webkit-transform: translate3d(176px, 6px, 1158px);
      transform: translate3d(176px, 6px, 1158px);
      background: #26d988;
    }
    
    .bubble:nth-child(11) {
      height: 21px;
      width: 21px;
      -webkit-animation-delay: -2.2s;
      animation-delay: -2.2s;
      -webkit-transform: translate3d(178px, 974px, 1357px);
      transform: translate3d(178px, 974px, 1357px);
      background: #d9268b;
    }
    
    .bubble:nth-child(12) {
      height: 19px;
      width: 19px;
      -webkit-animation-delay: -2.4s;
      animation-delay: -2.4s;
      -webkit-transform: translate3d(731px, 724px, 782px);
      transform: translate3d(731px, 724px, 782px);
      background: #d92926;
    }
    
    .bubble:nth-child(13) {
      height: 2px;
      width: 2px;
      -webkit-animation-delay: -2.6s;
      animation-delay: -2.6s;
      -webkit-transform: translate3d(581px, 953px, 1142px);
      transform: translate3d(581px, 953px, 1142px);
      background: #7dd926;
    }
    
    .bubble:nth-child(14) {
      height: 7px;
      width: 7px;
      -webkit-animation-delay: -2.8s;
      animation-delay: -2.8s;
      -webkit-transform: translate3d(391px, 607px, 166px);
      transform: translate3d(391px, 607px, 166px);
      background: #268ed9;
    }
    
    .bubble:nth-child(15) {
      height: 17px;
      width: 17px;
      -webkit-animation-delay: -3s;
      animation-delay: -3s;
      -webkit-transform: translate3d(581px, 276px, 1864px);
      transform: translate3d(581px, 276px, 1864px);
      background: #74d926;
    }
    
    .bubble:nth-child(16) {
      height: 14px;
      width: 14px;
      -webkit-animation-delay: -3.2s;
      animation-delay: -3.2s;
      -webkit-transform: translate3d(233px, 809px, 205px);
      transform: translate3d(233px, 809px, 205px);
      background: #2629d9;
    }
    
    .bubble:nth-child(17) {
      height: 14px;
      width: 14px;
      -webkit-animation-delay: -3.4s;
      animation-delay: -3.4s;
      -webkit-transform: translate3d(930px, 262px, 61px);
      transform: translate3d(930px, 262px, 61px);
      background: #269ad9;
    }
    
    .bubble:nth-child(18) {
      height: 6px;
      width: 6px;
      -webkit-animation-delay: -3.6s;
      animation-delay: -3.6s;
      -webkit-transform: translate3d(848px, 420px, 804px);
      transform: translate3d(848px, 420px, 804px);
      background: #d92f26;
    }
    
    .bubble:nth-child(19) {
      height: 24px;
      width: 24px;
      -webkit-animation-delay: -3.8s;
      animation-delay: -3.8s;
      -webkit-transform: translate3d(111px, 408px, 1131px);
      transform: translate3d(111px, 408px, 1131px);
      background: #3226d9;
    }
    
    .bubble:nth-child(20) {
      height: 17px;
      width: 17px;
      -webkit-animation-delay: -4s;
      animation-delay: -4s;
      -webkit-transform: translate3d(540px, 973px, 896px);
      transform: translate3d(540px, 973px, 896px);
      background: #264dd9;
    }
    
    .bubble:nth-child(21) {
      height: 27px;
      width: 27px;
      -webkit-animation-delay: -4.2s;
      animation-delay: -4.2s;
      -webkit-transform: translate3d(79px, 149px, 748px);
      transform: translate3d(79px, 149px, 748px);
      background: #b826d9;
    }
    
    .bubble:nth-child(22) {
      height: 25px;
      width: 25px;
      -webkit-animation-delay: -4.4s;
      animation-delay: -4.4s;
      -webkit-transform: translate3d(45px, 8px, 1376px);
      transform: translate3d(45px, 8px, 1376px);
      background: #62d926;
    }
    
    .bubble:nth-child(23) {
      height: 27px;
      width: 27px;
      -webkit-animation-delay: -4.6s;
      animation-delay: -4.6s;
      -webkit-transform: translate3d(95px, 935px, 194px);
      transform: translate3d(95px, 935px, 194px);
      background: #c4d926;
    }
    
    .bubble:nth-child(24) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -4.8s;
      animation-delay: -4.8s;
      -webkit-transform: translate3d(301px, 994px, 972px);
      transform: translate3d(301px, 994px, 972px);
      background: #d96826;
    }
    
    .bubble:nth-child(25) {
      height: 3px;
      width: 3px;
      -webkit-animation-delay: -5s;
      animation-delay: -5s;
      -webkit-transform: translate3d(779px, 590px, 1290px);
      transform: translate3d(779px, 590px, 1290px);
      background: #8226d9;
    }
    
    .bubble:nth-child(26) {
      height: 18px;
      width: 18px;
      -webkit-animation-delay: -5.2s;
      animation-delay: -5.2s;
      -webkit-transform: translate3d(824px, 211px, 1825px);
      transform: translate3d(824px, 211px, 1825px);
      background: #3b26d9;
    }
    
    .bubble:nth-child(27) {
      height: 29px;
      width: 29px;
      -webkit-animation-delay: -5.4s;
      animation-delay: -5.4s;
      -webkit-transform: translate3d(664px, 432px, 843px);
      transform: translate3d(664px, 432px, 843px);
      background: #a926d9;
    }
    
    .bubble:nth-child(28) {
      height: 24px;
      width: 24px;
      -webkit-animation-delay: -5.6s;
      animation-delay: -5.6s;
      -webkit-transform: translate3d(95px, 181px, 1350px);
      transform: translate3d(95px, 181px, 1350px);
      background: #26d941;
    }
    
    .bubble:nth-child(29) {
      height: 12px;
      width: 12px;
      -webkit-animation-delay: -5.8s;
      animation-delay: -5.8s;
      -webkit-transform: translate3d(480px, 919px, 1937px);
      transform: translate3d(480px, 919px, 1937px);
      background: #59d926;
    }
    
    .bubble:nth-child(30) {
      height: 8px;
      width: 8px;
      -webkit-animation-delay: -6s;
      animation-delay: -6s;
      -webkit-transform: translate3d(10px, 551px, 1700px);
      transform: translate3d(10px, 551px, 1700px);
      background: #32d926;
    }
    
    .bubble:nth-child(31) {
      height: 12px;
      width: 12px;
      -webkit-animation-delay: -6.2s;
      animation-delay: -6.2s;
      -webkit-transform: translate3d(98px, 78px, 1416px);
      transform: translate3d(98px, 78px, 1416px);
      background: #7126d9;
    }
    
    .bubble:nth-child(32) {
      height: 11px;
      width: 11px;
      -webkit-animation-delay: -6.4s;
      animation-delay: -6.4s;
      -webkit-transform: translate3d(121px, 759px, 1602px);
      transform: translate3d(121px, 759px, 1602px);
      background: #2682d9;
    }
    
    .bubble:nth-child(33) {
      height: 12px;
      width: 12px;
      -webkit-animation-delay: -6.6s;
      animation-delay: -6.6s;
      -webkit-transform: translate3d(870px, 301px, 394px);
      transform: translate3d(870px, 301px, 394px);
      background: #d6d926;
    }
    
    .bubble:nth-child(34) {
      height: 17px;
      width: 17px;
      -webkit-animation-delay: -6.8s;
      animation-delay: -6.8s;
      -webkit-transform: translate3d(401px, 170px, 1612px);
      transform: translate3d(401px, 170px, 1612px);
      background: #5026d9;
    }
    
    .bubble:nth-child(35) {
      height: 22px;
      width: 22px;
      -webkit-animation-delay: -7s;
      animation-delay: -7s;
      -webkit-transform: translate3d(186px, 837px, 1659px);
      transform: translate3d(186px, 837px, 1659px);
      background: #d93e26;
    }
    
    .bubble:nth-child(36) {
      height: 9px;
      width: 9px;
      -webkit-animation-delay: -7.2s;
      animation-delay: -7.2s;
      -webkit-transform: translate3d(870px, 224px, 1394px);
      transform: translate3d(870px, 224px, 1394px);
      background: #d926c7;
    }
    
    .bubble:nth-child(37) {
      height: 20px;
      width: 20px;
      -webkit-animation-delay: -7.4s;
      animation-delay: -7.4s;
      -webkit-transform: translate3d(394px, 569px, 812px);
      transform: translate3d(394px, 569px, 812px);
      background: #d95026;
    }
    
    .bubble:nth-child(38) {
      height: 21px;
      width: 21px;
      -webkit-animation-delay: -7.6s;
      animation-delay: -7.6s;
      -webkit-transform: translate3d(788px, 257px, 1669px);
      transform: translate3d(788px, 257px, 1669px);
      background: #d98026;
    }
    
    .bubble:nth-child(39) {
      height: 30px;
      width: 30px;
      -webkit-animation-delay: -7.8s;
      animation-delay: -7.8s;
      -webkit-transform: translate3d(553px, 869px, 1207px);
      transform: translate3d(553px, 869px, 1207px);
      background: #26d0d9;
    }
    
    .bubble:nth-child(40) {
      height: 28px;
      width: 28px;
      -webkit-animation-delay: -8s;
      animation-delay: -8s;
      -webkit-transform: translate3d(778px, 178px, 672px);
      transform: translate3d(778px, 178px, 672px);
      background: #74d926;
    }
    
    .bubble:nth-child(41) {
      height: 8px;
      width: 8px;
      -webkit-animation-delay: -8.2s;
      animation-delay: -8.2s;
      -webkit-transform: translate3d(724px, 321px, 57px);
      transform: translate3d(724px, 321px, 57px);
      background: #d92697;
    }
    
    .bubble:nth-child(42) {
      height: 24px;
      width: 24px;
      -webkit-animation-delay: -8.4s;
      animation-delay: -8.4s;
      -webkit-transform: translate3d(213px, 776px, 250px);
      transform: translate3d(213px, 776px, 250px);
      background: #2650d9;
    }
    
    .bubble:nth-child(43) {
      height: 24px;
      width: 24px;
      -webkit-animation-delay: -8.6s;
      animation-delay: -8.6s;
      -webkit-transform: translate3d(346px, 316px, 1589px);
      transform: translate3d(346px, 316px, 1589px);
      background: #4a26d9;
    }
    
    .bubble:nth-child(44) {
      height: 2px;
      width: 2px;
      -webkit-animation-delay: -8.8s;
      animation-delay: -8.8s;
      -webkit-transform: translate3d(107px, 294px, 860px);
      transform: translate3d(107px, 294px, 860px);
      background: #d9263b;
    }
    
    .bubble:nth-child(45) {
      height: 30px;
      width: 30px;
      -webkit-animation-delay: -9s;
      animation-delay: -9s;
      -webkit-transform: translate3d(587px, 210px, 1643px);
      transform: translate3d(587px, 210px, 1643px);
      background: #d92635;
    }
    
    .bubble:nth-child(46) {
      height: 6px;
      width: 6px;
      -webkit-animation-delay: -9.2s;
      animation-delay: -9.2s;
      -webkit-transform: translate3d(484px, 59px, 248px);
      transform: translate3d(484px, 59px, 248px);
      background: #26d95c;
    }
    
    .bubble:nth-child(47) {
      height: 13px;
      width: 13px;
      -webkit-animation-delay: -9.4s;
      animation-delay: -9.4s;
      -webkit-transform: translate3d(90px, 596px, 868px);
      transform: translate3d(90px, 596px, 868px);
      background: #d92626;
    }
    
    .bubble:nth-child(48) {
      height: 1px;
      width: 1px;
      -webkit-animation-delay: -9.6s;
      animation-delay: -9.6s;
      -webkit-transform: translate3d(952px, 304px, 1963px);
      transform: translate3d(952px, 304px, 1963px);
      background: #d92665;
    }
    
    .bubble:nth-child(49) {
      height: 8px;
      width: 8px;
      -webkit-animation-delay: -9.8s;
      animation-delay: -9.8s;
      -webkit-transform: translate3d(38px, 383px, 135px);
      transform: translate3d(38px, 383px, 135px);
      background: #26bbd9;
    }
    
    .bubble:nth-child(50) {
      height: 22px;
      width: 22px;
      -webkit-animation-delay: -10s;
      animation-delay: -10s;
      -webkit-transform: translate3d(722px, 691px, 411px);
      transform: translate3d(722px, 691px, 411px);
      background: #2626d9;
    }
    
    .bubble:nth-child(51) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -10.2s;
      animation-delay: -10.2s;
      -webkit-transform: translate3d(771px, 546px, 42px);
      transform: translate3d(771px, 546px, 42px);
      background: #a3d926;
    }
    
    .bubble:nth-child(52) {
      height: 29px;
      width: 29px;
      -webkit-animation-delay: -10.4s;
      animation-delay: -10.4s;
      -webkit-transform: translate3d(7px, 78px, 1725px);
      transform: translate3d(7px, 78px, 1725px);
      background: #4dd926;
    }
    
    .bubble:nth-child(53) {
      height: 15px;
      width: 15px;
      -webkit-animation-delay: -10.6s;
      animation-delay: -10.6s;
      -webkit-transform: translate3d(596px, 108px, 1239px);
      transform: translate3d(596px, 108px, 1239px);
      background: #26d9d0;
    }
    
    .bubble:nth-child(54) {
      height: 25px;
      width: 25px;
      -webkit-animation-delay: -10.8s;
      animation-delay: -10.8s;
      -webkit-transform: translate3d(932px, 846px, 635px);
      transform: translate3d(932px, 846px, 635px);
      background: #26d9d0;
    }
    
    .bubble:nth-child(55) {
      height: 25px;
      width: 25px;
      -webkit-animation-delay: -11s;
      animation-delay: -11s;
      -webkit-transform: translate3d(34px, 108px, 1904px);
      transform: translate3d(34px, 108px, 1904px);
      background: #88d926;
    }
    
    .bubble:nth-child(56) {
      height: 1px;
      width: 1px;
      -webkit-animation-delay: -11.2s;
      animation-delay: -11.2s;
      -webkit-transform: translate3d(502px, 687px, 331px);
      transform: translate3d(502px, 687px, 331px);
      background: #26d977;
    }
    
    .bubble:nth-child(57) {
      height: 7px;
      width: 7px;
      -webkit-animation-delay: -11.4s;
      animation-delay: -11.4s;
      -webkit-transform: translate3d(478px, 767px, 1474px);
      transform: translate3d(478px, 767px, 1474px);
      background: #d93e26;
    }
    
    .bubble:nth-child(58) {
      height: 22px;
      width: 22px;
      -webkit-animation-delay: -11.6s;
      animation-delay: -11.6s;
      -webkit-transform: translate3d(344px, 427px, 1288px);
      transform: translate3d(344px, 427px, 1288px);
      background: #9a26d9;
    }
    
    .bubble:nth-child(59) {
      height: 19px;
      width: 19px;
      -webkit-animation-delay: -11.8s;
      animation-delay: -11.8s;
      -webkit-transform: translate3d(224px, 957px, 1227px);
      transform: translate3d(224px, 957px, 1227px);
      background: #4126d9;
    }
    
    .bubble:nth-child(60) {
      height: 9px;
      width: 9px;
      -webkit-animation-delay: -12s;
      animation-delay: -12s;
      -webkit-transform: translate3d(508px, 884px, 329px);
      transform: translate3d(508px, 884px, 329px);
      background: #26d9d9;
    }
    
    .bubble:nth-child(61) {
      height: 1px;
      width: 1px;
      -webkit-animation-delay: -12.2s;
      animation-delay: -12.2s;
      -webkit-transform: translate3d(146px, 203px, 1727px);
      transform: translate3d(146px, 203px, 1727px);
      background: #74d926;
    }
    
    .bubble:nth-child(62) {
      height: 8px;
      width: 8px;
      -webkit-animation-delay: -12.4s;
      animation-delay: -12.4s;
      -webkit-transform: translate3d(447px, 662px, 861px);
      transform: translate3d(447px, 662px, 861px);
      background: #d95f26;
    }
    
    .bubble:nth-child(63) {
      height: 29px;
      width: 29px;
      -webkit-animation-delay: -12.6s;
      animation-delay: -12.6s;
      -webkit-transform: translate3d(935px, 835px, 1722px);
      transform: translate3d(935px, 835px, 1722px);
      background: #2697d9;
    }
    
    .bubble:nth-child(64) {
      height: 3px;
      width: 3px;
      -webkit-animation-delay: -12.8s;
      animation-delay: -12.8s;
      -webkit-transform: translate3d(669px, 313px, 1463px);
      transform: translate3d(669px, 313px, 1463px);
      background: #a026d9;
    }
    
    .bubble:nth-child(65) {
      height: 28px;
      width: 28px;
      -webkit-animation-delay: -13s;
      animation-delay: -13s;
      -webkit-transform: translate3d(815px, 674px, 1684px);
      transform: translate3d(815px, 674px, 1684px);
      background: #62d926;
    }
    
    .bubble:nth-child(66) {
      height: 20px;
      width: 20px;
      -webkit-animation-delay: -13.2s;
      animation-delay: -13.2s;
      -webkit-transform: translate3d(173px, 899px, 671px);
      transform: translate3d(173px, 899px, 671px);
      background: #2fd926;
    }
    
    .bubble:nth-child(67) {
      height: 13px;
      width: 13px;
      -webkit-animation-delay: -13.4s;
      animation-delay: -13.4s;
      -webkit-transform: translate3d(892px, 702px, 353px);
      transform: translate3d(892px, 702px, 353px);
      background: #d9269d;
    }
    
    .bubble:nth-child(68) {
      height: 9px;
      width: 9px;
      -webkit-animation-delay: -13.6s;
      animation-delay: -13.6s;
      -webkit-transform: translate3d(630px, 46px, 747px);
      transform: translate3d(630px, 46px, 747px);
      background: #26d9ac;
    }
    
    .bubble:nth-child(69) {
      height: 10px;
      width: 10px;
      -webkit-animation-delay: -13.8s;
      animation-delay: -13.8s;
      -webkit-transform: translate3d(242px, 718px, 1403px);
      transform: translate3d(242px, 718px, 1403px);
      background: #35d926;
    }
    
    .bubble:nth-child(70) {
      height: 17px;
      width: 17px;
      -webkit-animation-delay: -14s;
      animation-delay: -14s;
      -webkit-transform: translate3d(345px, 47px, 155px);
      transform: translate3d(345px, 47px, 155px);
      background: #26d950;
    }
    
    .bubble:nth-child(71) {
      height: 15px;
      width: 15px;
      -webkit-animation-delay: -14.2s;
      animation-delay: -14.2s;
      -webkit-transform: translate3d(504px, 433px, 1494px);
      transform: translate3d(504px, 433px, 1494px);
      background: #269ad9;
    }
    
    .bubble:nth-child(72) {
      height: 2px;
      width: 2px;
      -webkit-animation-delay: -14.4s;
      animation-delay: -14.4s;
      -webkit-transform: translate3d(916px, 923px, 1091px);
      transform: translate3d(916px, 923px, 1091px);
      background: #d96b26;
    }
    
    .bubble:nth-child(73) {
      height: 20px;
      width: 20px;
      -webkit-animation-delay: -14.6s;
      animation-delay: -14.6s;
      -webkit-transform: translate3d(882px, 217px, 769px);
      transform: translate3d(882px, 217px, 769px);
      background: #26d9d0;
    }
    
    .bubble:nth-child(74) {
      height: 1px;
      width: 1px;
      -webkit-animation-delay: -14.8s;
      animation-delay: -14.8s;
      -webkit-transform: translate3d(388px, 997px, 551px);
      transform: translate3d(388px, 997px, 551px);
      background: #d326d9;
    }
    
    .bubble:nth-child(75) {
      height: 24px;
      width: 24px;
      -webkit-animation-delay: -15s;
      animation-delay: -15s;
      -webkit-transform: translate3d(918px, 560px, 540px);
      transform: translate3d(918px, 560px, 540px);
      background: #26bbd9;
    }
    
    .bubble:nth-child(76) {
      height: 12px;
      width: 12px;
      -webkit-animation-delay: -15.2s;
      animation-delay: -15.2s;
      -webkit-transform: translate3d(920px, 542px, 88px);
      transform: translate3d(920px, 542px, 88px);
      background: #d92685;
    }
    
    .bubble:nth-child(77) {
      height: 28px;
      width: 28px;
      -webkit-animation-delay: -15.4s;
      animation-delay: -15.4s;
      -webkit-transform: translate3d(710px, 161px, 1983px);
      transform: translate3d(710px, 161px, 1983px);
      background: #263ed9;
    }
    
    .bubble:nth-child(78) {
      height: 5px;
      width: 5px;
      -webkit-animation-delay: -15.6s;
      animation-delay: -15.6s;
      -webkit-transform: translate3d(577px, 268px, 1805px);
      transform: translate3d(577px, 268px, 1805px);
      background: #2677d9;
    }
    
    .bubble:nth-child(79) {
      height: 16px;
      width: 16px;
      -webkit-animation-delay: -15.8s;
      animation-delay: -15.8s;
      -webkit-transform: translate3d(46px, 963px, 579px);
      transform: translate3d(46px, 963px, 579px);
      background: #26d947;
    }
    
    .bubble:nth-child(80) {
      height: 26px;
      width: 26px;
      -webkit-animation-delay: -16s;
      animation-delay: -16s;
      -webkit-transform: translate3d(557px, 439px, 1726px);
      transform: translate3d(557px, 439px, 1726px);
      background: #d99d26;
    }
    
    .bubble:nth-child(81) {
      height: 1px;
      width: 1px;
      -webkit-animation-delay: -16.2s;
      animation-delay: -16.2s;
      -webkit-transform: translate3d(12px, 250px, 120px);
      transform: translate3d(12px, 250px, 120px);
      background: #26d947;
    }
    
    .bubble:nth-child(82) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -16.4s;
      animation-delay: -16.4s;
      -webkit-transform: translate3d(805px, 741px, 949px);
      transform: translate3d(805px, 741px, 949px);
      background: #d92644;
    }
    
    .bubble:nth-child(83) {
      height: 6px;
      width: 6px;
      -webkit-animation-delay: -16.6s;
      animation-delay: -16.6s;
      -webkit-transform: translate3d(403px, 898px, 1547px);
      transform: translate3d(403px, 898px, 1547px);
      background: #5cd926;
    }
    
    .bubble:nth-child(84) {
      height: 14px;
      width: 14px;
      -webkit-animation-delay: -16.8s;
      animation-delay: -16.8s;
      -webkit-transform: translate3d(449px, 996px, 1184px);
      transform: translate3d(449px, 996px, 1184px);
      background: #9dd926;
    }
    
    .bubble:nth-child(85) {
      height: 15px;
      width: 15px;
      -webkit-animation-delay: -17s;
      animation-delay: -17s;
      -webkit-transform: translate3d(277px, 561px, 1401px);
      transform: translate3d(277px, 561px, 1401px);
      background: #c4d926;
    }
    
    .bubble:nth-child(86) {
      height: 10px;
      width: 10px;
      -webkit-animation-delay: -17.2s;
      animation-delay: -17.2s;
      -webkit-transform: translate3d(988px, 562px, 99px);
      transform: translate3d(988px, 562px, 99px);
      background: #26d991;
    }
    
    .bubble:nth-child(87) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -17.4s;
      animation-delay: -17.4s;
      -webkit-transform: translate3d(947px, 463px, 96px);
      transform: translate3d(947px, 463px, 96px);
      background: #d9af26;
    }
    
    .bubble:nth-child(88) {
      height: 23px;
      width: 23px;
      -webkit-animation-delay: -17.6s;
      animation-delay: -17.6s;
      -webkit-transform: translate3d(139px, 252px, 618px);
      transform: translate3d(139px, 252px, 618px);
      background: #d92697;
    }
    
    .bubble:nth-child(89) {
      height: 29px;
      width: 29px;
      -webkit-animation-delay: -17.8s;
      animation-delay: -17.8s;
      -webkit-transform: translate3d(911px, 973px, 209px);
      transform: translate3d(911px, 973px, 209px);
      background: #d92674;
    }
    
    .bubble:nth-child(90) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -18s;
      animation-delay: -18s;
      -webkit-transform: translate3d(170px, 958px, 599px);
      transform: translate3d(170px, 958px, 599px);
      background: #26b8d9;
    }
    
    .bubble:nth-child(91) {
      height: 27px;
      width: 27px;
      -webkit-animation-delay: -18.2s;
      animation-delay: -18.2s;
      -webkit-transform: translate3d(412px, 375px, 1775px);
      transform: translate3d(412px, 375px, 1775px);
      background: #d926be;
    }
    
    .bubble:nth-child(92) {
      height: 22px;
      width: 22px;
      -webkit-animation-delay: -18.4s;
      animation-delay: -18.4s;
      -webkit-transform: translate3d(867px, 541px, 1964px);
      transform: translate3d(867px, 541px, 1964px);
      background: #d9be26;
    }
    
    .bubble:nth-child(93) {
      height: 14px;
      width: 14px;
      -webkit-animation-delay: -18.6s;
      animation-delay: -18.6s;
      -webkit-transform: translate3d(194px, 350px, 1538px);
      transform: translate3d(194px, 350px, 1538px);
      background: #26d953;
    }
    
    .bubble:nth-child(94) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -18.8s;
      animation-delay: -18.8s;
      -webkit-transform: translate3d(358px, 926px, 578px);
      transform: translate3d(358px, 926px, 578px);
      background: #d92677;
    }
    
    .bubble:nth-child(95) {
      height: 16px;
      width: 16px;
      -webkit-animation-delay: -19s;
      animation-delay: -19s;
      -webkit-transform: translate3d(149px, 198px, 360px);
      transform: translate3d(149px, 198px, 360px);
      background: #26b2d9;
    }
    
    .bubble:nth-child(96) {
      height: 18px;
      width: 18px;
      -webkit-animation-delay: -19.2s;
      animation-delay: -19.2s;
      -webkit-transform: translate3d(171px, 432px, 1961px);
      transform: translate3d(171px, 432px, 1961px);
      background: #d92662;
    }
    
    .bubble:nth-child(97) {
      height: 3px;
      width: 3px;
      -webkit-animation-delay: -19.4s;
      animation-delay: -19.4s;
      -webkit-transform: translate3d(53px, 423px, 351px);
      transform: translate3d(53px, 423px, 351px);
      background: #c4d926;
    }
    
    .bubble:nth-child(98) {
      height: 11px;
      width: 11px;
      -webkit-animation-delay: -19.6s;
      animation-delay: -19.6s;
      -webkit-transform: translate3d(159px, 214px, 1168px);
      transform: translate3d(159px, 214px, 1168px);
      background: #d93b26;
    }
    
    .bubble:nth-child(99) {
      height: 2px;
      width: 2px;
      -webkit-animation-delay: -19.8s;
      animation-delay: -19.8s;
      -webkit-transform: translate3d(192px, 156px, 651px);
      transform: translate3d(192px, 156px, 651px);
      background: #2629d9;
    }
    
    .bubble:nth-child(100) {
      height: 4px;
      width: 4px;
      -webkit-animation-delay: -20s;
      animation-delay: -20s;
      -webkit-transform: translate3d(969px, 171px, 72px);
      transform: translate3d(969px, 171px, 72px);
      background: #26d9d0;
    }
  </style>

</body>
<h1>
   <span>MADE BY DEVANSH MISHRA</span>
       </h1>
</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more