网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css制作逼真的蜡烛火焰动画效果

2022/5/22 21:06:23

css的功能越来越强大了,可以制作出很多酷炫的动画效果,今天我们就来使用css制作一个逼真的蜡烛火焰动画效果,如下图所示:<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" …

        css的功能越来越强大了,可以制作出很多酷炫的动画效果,今天我们就来使用css制作一个逼真的蜡烛火焰动画效果,如下图所示:

image.png

<html>
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>css制作逼真的蜡烛火焰动画效果www.woaidaogu.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <style>
    html,
    body {
      height: 100%;
      background: #000;
      overflow: hidden;
    }
    .g-candle {
      position: absolute;
      width: 400px;
      height: 400px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .g-body {
      position: relative;
      width: 100px;
      height: 300px;
      margin: 280px auto;
      background: linear-gradient(230deg, #ca9800, #573903, black 70%);
      z-index: 1;
    }
    .g-body::before {
      position: absolute;
      content: "";
      width: 100px;
      height: 40px;
      border-radius: 50%;
      box-sizing: border-box;
      top: -20px;
      background: radial-gradient(#a46800, #5c3104 45%, #905602 100%);
    }
    .g-body::after {
      position: absolute;
      content: "";
      width: 4px;
      height: 48px;
      background: #fff;
      left: 50%;
      top: -22px;
      transform: translate(-50%, -50%);
      border-radius: 50% 50% 0 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 60%, #fff);
      opacity: 0.7;
      filter: blur(1px);
    }
    .g-fire-box {
      position: absolute;
      top: 97px;
      left: 50%;
      width: 80px;
      height: 200px;
      transform: translate(-50%, -50%);
      filter: blur(2px) contrast(20);
    }
    .g-fire {
      position: absolute;
      top: 30px;
      left: 50%;
      border-radius: 45%;
      box-sizing: border-box;
      border: 120px solid #000;
      border-bottom: 120px solid transparent;
      transform: translate(-50%, 0) scaleX(0.45);
      background-color: #761b00;
    }
    .g-ball {
      position: absolute;
      top: 60px;
      transform: translate(0, 0);
      background: #fa8763;
      border-radius: 50%;
      z-index: -1;
      mix-blend-mode: screen;
    }
    .g-ball:nth-child(1) {
      width: 12px;
      height: 12px;
      left: calc(37px - 55px);
    }
    .g-ball:nth-child(1) {
      -webkit-animation: movetop 1s linear -1.469s infinite;
      animation: movetop 1s linear -1.469s infinite;
    }
    .g-ball:nth-child(2) {
      width: 38px;
      height: 38px;
      left: calc(22px - 55px);
    }
    .g-ball:nth-child(2) {
      -webkit-animation: movetop 1s linear -0.359s infinite;
      animation: movetop 1s linear -0.359s infinite;
    }
    .g-ball:nth-child(3) {
      width: 48px;
      height: 48px;
      left: calc(21px - 55px);
    }
    .g-ball:nth-child(3) {
      -webkit-animation: movetop 1s linear -1.559s infinite;
      animation: movetop 1s linear -1.559s infinite;
    }
    .g-ball:nth-child(4) {
      width: 7px;
      height: 7px;
      left: calc(51px - 55px);
    }
    .g-ball:nth-child(4) {
      -webkit-animation: movetop 1s linear -0.883s infinite;
      animation: movetop 1s linear -0.883s infinite;
    }
    .g-ball:nth-child(5) {
      width: 24px;
      height: 24px;
      left: calc(60px - 55px);
    }
    .g-ball:nth-child(5) {
      -webkit-animation: movetop 1s linear -1.31s infinite;
      animation: movetop 1s linear -1.31s infinite;
    }
    .g-ball:nth-child(6) {
      width: 2px;
      height: 2px;
      left: calc(60px - 55px);
    }
    .g-ball:nth-child(6) {
      -webkit-animation: movetop 1s linear -1.312s infinite;
      animation: movetop 1s linear -1.312s infinite;
    }
    .g-ball:nth-child(7) {
      width: 20px;
      height: 20px;
      left: calc(60px - 55px);
    }
    .g-ball:nth-child(7) {
      -webkit-animation: movetop 1s linear -1.529s infinite;
      animation: movetop 1s linear -1.529s infinite;
    }
    .g-ball:nth-child(8) {
      width: 4px;
      height: 4px;
      left: calc(69px - 55px);
    }
    .g-ball:nth-child(8) {
      -webkit-animation: movetop 1s linear -2.763s infinite;
      animation: movetop 1s linear -2.763s infinite;
    }
    .g-ball:nth-child(9) {
      width: 42px;
      height: 42px;
      left: calc(27px - 55px);
    }
    .g-ball:nth-child(9) {
      -webkit-animation: movetop 1s linear -1.263s infinite;
      animation: movetop 1s linear -1.263s infinite;
    }
    .g-ball:nth-child(10) {
      width: 13px;
      height: 13px;
      left: calc(41px - 55px);
    }
    .g-ball:nth-child(10) {
      -webkit-animation: movetop 1s linear -0.532s infinite;
      animation: movetop 1s linear -0.532s infinite;
    }
    .g-ball:nth-child(11) {
      width: 10px;
      height: 10px;
      left: calc(50px - 55px);
    }
    .g-ball:nth-child(11) {
      -webkit-animation: movetop 1s linear -0.874s infinite;
      animation: movetop 1s linear -0.874s infinite;
    }
    .g-ball:nth-child(12) {
      width: 13px;
      height: 13px;
      left: calc(58px - 55px);
    }
    .g-ball:nth-child(12) {
      -webkit-animation: movetop 1s linear -1.807s infinite;
      animation: movetop 1s linear -1.807s infinite;
    }
    .g-ball:nth-child(13) {
      width: 15px;
      height: 15px;
      left: calc(20px - 55px);
    }
    .g-ball:nth-child(13) {
      -webkit-animation: movetop 1s linear -2.626s infinite;
      animation: movetop 1s linear -2.626s infinite;
    }
    .g-ball:nth-child(14) {
      width: 20px;
      height: 20px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(14) {
      -webkit-animation: movetop 1s linear -0.418s infinite;
      animation: movetop 1s linear -0.418s infinite;
    }
    .g-ball:nth-child(15) {
      width: 1px;
      height: 1px;
      left: calc(41px - 55px);
    }
    .g-ball:nth-child(15) {
      -webkit-animation: movetop 1s linear -1.395s infinite;
      animation: movetop 1s linear -1.395s infinite;
    }
    .g-ball:nth-child(16) {
      width: 48px;
      height: 48px;
      left: calc(36px - 55px);
    }
    .g-ball:nth-child(16) {
      -webkit-animation: movetop 1s linear -0.504s infinite;
      animation: movetop 1s linear -0.504s infinite;
    }
    .g-ball:nth-child(17) {
      width: 33px;
      height: 33px;
      left: calc(42px - 55px);
    }
    .g-ball:nth-child(17) {
      -webkit-animation: movetop 1s linear -2.193s infinite;
      animation: movetop 1s linear -2.193s infinite;
    }
    .g-ball:nth-child(18) {
      width: 7px;
      height: 7px;
      left: calc(50px - 55px);
    }
    .g-ball:nth-child(18) {
      -webkit-animation: movetop 1s linear -0.201s infinite;
      animation: movetop 1s linear -0.201s infinite;
    }
    .g-ball:nth-child(19) {
      width: 31px;
      height: 31px;
      left: calc(56px - 55px);
    }
    .g-ball:nth-child(19) {
      -webkit-animation: movetop 1s linear -1.485s infinite;
      animation: movetop 1s linear -1.485s infinite;
    }
    .g-ball:nth-child(20) {
      width: 46px;
      height: 46px;
      left: calc(12px - 55px);
    }
    .g-ball:nth-child(20) {
      -webkit-animation: movetop 1s linear -2.374s infinite;
      animation: movetop 1s linear -2.374s infinite;
    }
    .g-ball:nth-child(21) {
      width: 42px;
      height: 42px;
      left: calc(60px - 55px);
    }
    .g-ball:nth-child(21) {
      -webkit-animation: movetop 1s linear -2.159s infinite;
      animation: movetop 1s linear -2.159s infinite;
    }
    .g-ball:nth-child(22) {
      width: 48px;
      height: 48px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(22) {
      -webkit-animation: movetop 1s linear -0.016s infinite;
      animation: movetop 1s linear -0.016s infinite;
    }
    .g-ball:nth-child(23) {
      width: 50px;
      height: 50px;
      left: calc(10px - 55px);
    }
    .g-ball:nth-child(23) {
      -webkit-animation: movetop 1s linear -0.929s infinite;
      animation: movetop 1s linear -0.929s infinite;
    }
    .g-ball:nth-child(24) {
      width: 7px;
      height: 7px;
      left: calc(51px - 55px);
    }
    .g-ball:nth-child(24) {
      -webkit-animation: movetop 1s linear -2.159s infinite;
      animation: movetop 1s linear -2.159s infinite;
    }
    .g-ball:nth-child(25) {
      width: 24px;
      height: 24px;
      left: calc(17px - 55px);
    }
    .g-ball:nth-child(25) {
      -webkit-animation: movetop 1s linear -0.642s infinite;
      animation: movetop 1s linear -0.642s infinite;
    }
    .g-ball:nth-child(26) {
      width: 10px;
      height: 10px;
      left: calc(20px - 55px);
    }
    .g-ball:nth-child(26) {
      -webkit-animation: movetop 1s linear -0.668s infinite;
      animation: movetop 1s linear -0.668s infinite;
    }
    .g-ball:nth-child(27) {
      width: 50px;
      height: 50px;
      left: calc(42px - 55px);
    }
    .g-ball:nth-child(27) {
      -webkit-animation: movetop 1s linear -2.048s infinite;
      animation: movetop 1s linear -2.048s infinite;
    }
    .g-ball:nth-child(28) {
      width: 45px;
      height: 45px;
      left: calc(6px - 55px);
    }
    .g-ball:nth-child(28) {
      -webkit-animation: movetop 1s linear -1.536s infinite;
      animation: movetop 1s linear -1.536s infinite;
    }
    .g-ball:nth-child(29) {
      width: 34px;
      height: 34px;
      left: calc(49px - 55px);
    }
    .g-ball:nth-child(29) {
      -webkit-animation: movetop 1s linear -1.479s infinite;
      animation: movetop 1s linear -1.479s infinite;
    }
    .g-ball:nth-child(30) {
      width: 19px;
      height: 19px;
      left: calc(21px - 55px);
    }
    .g-ball:nth-child(30) {
      -webkit-animation: movetop 1s linear -2.631s infinite;
      animation: movetop 1s linear -2.631s infinite;
    }
    .g-ball:nth-child(31) {
      width: 39px;
      height: 39px;
      left: calc(27px - 55px);
    }
    .g-ball:nth-child(31) {
      -webkit-animation: movetop 1s linear -1.026s infinite;
      animation: movetop 1s linear -1.026s infinite;
    }
    .g-ball:nth-child(32) {
      width: 38px;
      height: 38px;
      left: calc(32px - 55px);
    }
    .g-ball:nth-child(32) {
      -webkit-animation: movetop 1s linear -2.183s infinite;
      animation: movetop 1s linear -2.183s infinite;
    }
    .g-ball:nth-child(33) {
      width: 22px;
      height: 22px;
      left: calc(35px - 55px);
    }
    .g-ball:nth-child(33) {
      -webkit-animation: movetop 1s linear -2.521s infinite;
      animation: movetop 1s linear -2.521s infinite;
    }
    .g-ball:nth-child(34) {
      width: 36px;
      height: 36px;
      left: calc(17px - 55px);
    }
    .g-ball:nth-child(34) {
      -webkit-animation: movetop 1s linear -0.774s infinite;
      animation: movetop 1s linear -0.774s infinite;
    }
    .g-ball:nth-child(35) {
      width: 3px;
      height: 3px;
      left: calc(54px - 55px);
    }
    .g-ball:nth-child(35) {
      -webkit-animation: movetop 1s linear -1.198s infinite;
      animation: movetop 1s linear -1.198s infinite;
    }
    .g-ball:nth-child(36) {
      width: 26px;
      height: 26px;
      left: calc(44px - 55px);
    }
    .g-ball:nth-child(36) {
      -webkit-animation: movetop 1s linear -0.082s infinite;
      animation: movetop 1s linear -0.082s infinite;
    }
    .g-ball:nth-child(37) {
      width: 7px;
      height: 7px;
      left: calc(2px - 55px);
    }
    .g-ball:nth-child(37) {
      -webkit-animation: movetop 1s linear -1.143s infinite;
      animation: movetop 1s linear -1.143s infinite;
    }
    .g-ball:nth-child(38) {
      width: 16px;
      height: 16px;
      left: calc(49px - 55px);
    }
    .g-ball:nth-child(38) {
      -webkit-animation: movetop 1s linear -1.571s infinite;
      animation: movetop 1s linear -1.571s infinite;
    }
    .g-ball:nth-child(39) {
      width: 27px;
      height: 27px;
      left: calc(28px - 55px);
    }
    .g-ball:nth-child(39) {
      -webkit-animation: movetop 1s linear -1.118s infinite;
      animation: movetop 1s linear -1.118s infinite;
    }
    .g-ball:nth-child(40) {
      width: 13px;
      height: 13px;
      left: calc(51px - 55px);
    }
    .g-ball:nth-child(40) {
      -webkit-animation: movetop 1s linear -0.962s infinite;
      animation: movetop 1s linear -0.962s infinite;
    }
    .g-ball:nth-child(41) {
      width: 3px;
      height: 3px;
      left: calc(21px - 55px);
    }
    .g-ball:nth-child(41) {
      -webkit-animation: movetop 1s linear -1.482s infinite;
      animation: movetop 1s linear -1.482s infinite;
    }
    .g-ball:nth-child(42) {
      width: 48px;
      height: 48px;
      left: calc(42px - 55px);
    }
    .g-ball:nth-child(42) {
      -webkit-animation: movetop 1s linear -1.419s infinite;
      animation: movetop 1s linear -1.419s infinite;
    }
    .g-ball:nth-child(43) {
      width: 20px;
      height: 20px;
      left: calc(6px - 55px);
    }
    .g-ball:nth-child(43) {
      -webkit-animation: movetop 1s linear -0.338s infinite;
      animation: movetop 1s linear -0.338s infinite;
    }
    .g-ball:nth-child(44) {
      width: 4px;
      height: 4px;
      left: calc(50px - 55px);
    }
    .g-ball:nth-child(44) {
      -webkit-animation: movetop 1s linear -0.146s infinite;
      animation: movetop 1s linear -0.146s infinite;
    }
    .g-ball:nth-child(45) {
      width: 5px;
      height: 5px;
      left: calc(65px - 55px);
    }
    .g-ball:nth-child(45) {
      -webkit-animation: movetop 1s linear -0.063s infinite;
      animation: movetop 1s linear -0.063s infinite;
    }
    .g-ball:nth-child(46) {
      width: 20px;
      height: 20px;
      left: calc(51px - 55px);
    }
    .g-ball:nth-child(46) {
      -webkit-animation: movetop 1s linear -1.361s infinite;
      animation: movetop 1s linear -1.361s infinite;
    }
    .g-ball:nth-child(47) {
      width: 26px;
      height: 26px;
      left: calc(58px - 55px);
    }
    .g-ball:nth-child(47) {
      -webkit-animation: movetop 1s linear -0.322s infinite;
      animation: movetop 1s linear -0.322s infinite;
    }
    .g-ball:nth-child(48) {
      width: 47px;
      height: 47px;
      left: calc(61px - 55px);
    }
    .g-ball:nth-child(48) {
      -webkit-animation: movetop 1s linear -1.028s infinite;
      animation: movetop 1s linear -1.028s infinite;
    }
    .g-ball:nth-child(49) {
      width: 29px;
      height: 29px;
      left: calc(38px - 55px);
    }
    .g-ball:nth-child(49) {
      -webkit-animation: movetop 1s linear -0.303s infinite;
      animation: movetop 1s linear -0.303s infinite;
    }
    .g-ball:nth-child(50) {
      width: 25px;
      height: 25px;
      left: calc(3px - 55px);
    }
    .g-ball:nth-child(50) {
      -webkit-animation: movetop 1s linear -1.834s infinite;
      animation: movetop 1s linear -1.834s infinite;
    }
    .g-ball:nth-child(51) {
      width: 32px;
      height: 32px;
      left: calc(47px - 55px);
    }
    .g-ball:nth-child(51) {
      -webkit-animation: movetop 1s linear -1.316s infinite;
      animation: movetop 1s linear -1.316s infinite;
    }
    .g-ball:nth-child(52) {
      width: 1px;
      height: 1px;
      left: calc(29px - 55px);
    }
    .g-ball:nth-child(52) {
      -webkit-animation: movetop 1s linear -2.212s infinite;
      animation: movetop 1s linear -2.212s infinite;
    }
    .g-ball:nth-child(53) {
      width: 46px;
      height: 46px;
      left: calc(53px - 55px);
    }
    .g-ball:nth-child(53) {
      -webkit-animation: movetop 1s linear -1.827s infinite;
      animation: movetop 1s linear -1.827s infinite;
    }
    .g-ball:nth-child(54) {
      width: 43px;
      height: 43px;
      left: calc(60px - 55px);
    }
    .g-ball:nth-child(54) {
      -webkit-animation: movetop 1s linear -0.286s infinite;
      animation: movetop 1s linear -0.286s infinite;
    }
    .g-ball:nth-child(55) {
      width: 35px;
      height: 35px;
      left: calc(4px - 55px);
    }
    .g-ball:nth-child(55) {
      -webkit-animation: movetop 1s linear -1.614s infinite;
      animation: movetop 1s linear -1.614s infinite;
    }
    .g-ball:nth-child(56) {
      width: 41px;
      height: 41px;
      left: calc(15px - 55px);
    }
    .g-ball:nth-child(56) {
      -webkit-animation: movetop 1s linear -0.632s infinite;
      animation: movetop 1s linear -0.632s infinite;
    }
    .g-ball:nth-child(57) {
      width: 38px;
      height: 38px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(57) {
      -webkit-animation: movetop 1s linear -2.998s infinite;
      animation: movetop 1s linear -2.998s infinite;
    }
    .g-ball:nth-child(58) {
      width: 39px;
      height: 39px;
      left: calc(24px - 55px);
    }
    .g-ball:nth-child(58) {
      -webkit-animation: movetop 1s linear -0.839s infinite;
      animation: movetop 1s linear -0.839s infinite;
    }
    .g-ball:nth-child(59) {
      width: 35px;
      height: 35px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(59) {
      -webkit-animation: movetop 1s linear -0.53s infinite;
      animation: movetop 1s linear -0.53s infinite;
    }
    .g-ball:nth-child(60) {
      width: 24px;
      height: 24px;
      left: calc(8px - 55px);
    }
    .g-ball:nth-child(60) {
      -webkit-animation: movetop 1s linear -0.301s infinite;
      animation: movetop 1s linear -0.301s infinite;
    }
    .g-ball:nth-child(61) {
      width: 28px;
      height: 28px;
      left: calc(43px - 55px);
    }
    .g-ball:nth-child(61) {
      -webkit-animation: movetop 1s linear -1.606s infinite;
      animation: movetop 1s linear -1.606s infinite;
    }
    .g-ball:nth-child(62) {
      width: 46px;
      height: 46px;
      left: calc(11px - 55px);
    }
    .g-ball:nth-child(62) {
      -webkit-animation: movetop 1s linear -2.731s infinite;
      animation: movetop 1s linear -2.731s infinite;
    }
    .g-ball:nth-child(63) {
      width: 29px;
      height: 29px;
      left: calc(10px - 55px);
    }
    .g-ball:nth-child(63) {
      -webkit-animation: movetop 1s linear -1.562s infinite;
      animation: movetop 1s linear -1.562s infinite;
    }
    .g-ball:nth-child(64) {
      width: 19px;
      height: 19px;
      left: calc(52px - 55px);
    }
    .g-ball:nth-child(64) {
      -webkit-animation: movetop 1s linear -2.517s infinite;
      animation: movetop 1s linear -2.517s infinite;
    }
    .g-ball:nth-child(65) {
      width: 40px;
      height: 40px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(65) {
      -webkit-animation: movetop 1s linear -2.656s infinite;
      animation: movetop 1s linear -2.656s infinite;
    }
    .g-ball:nth-child(66) {
      width: 30px;
      height: 30px;
      left: calc(40px - 55px);
    }
    .g-ball:nth-child(66) {
      -webkit-animation: movetop 1s linear -1.574s infinite;
      animation: movetop 1s linear -1.574s infinite;
    }
    .g-ball:nth-child(67) {
      width: 23px;
      height: 23px;
      left: calc(61px - 55px);
    }
    .g-ball:nth-child(67) {
      -webkit-animation: movetop 1s linear -2.09s infinite;
      animation: movetop 1s linear -2.09s infinite;
    }
    .g-ball:nth-child(68) {
      width: 43px;
      height: 43px;
      left: calc(41px - 55px);
    }
    .g-ball:nth-child(68) {
      -webkit-animation: movetop 1s linear -1.744s infinite;
      animation: movetop 1s linear -1.744s infinite;
    }
    .g-ball:nth-child(69) {
      width: 40px;
      height: 40px;
      left: calc(31px - 55px);
    }
    .g-ball:nth-child(69) {
      -webkit-animation: movetop 1s linear -2.913s infinite;
      animation: movetop 1s linear -2.913s infinite;
    }
    .g-ball:nth-child(70) {
      width: 8px;
      height: 8px;
      left: calc(24px - 55px);
    }
    .g-ball:nth-child(70) {
      -webkit-animation: movetop 1s linear -2.425s infinite;
      animation: movetop 1s linear -2.425s infinite;
    }
    .g-ball:nth-child(71) {
      width: 10px;
      height: 10px;
      left: calc(40px - 55px);
    }
    .g-ball:nth-child(71) {
      -webkit-animation: movetop 1s linear -0.486s infinite;
      animation: movetop 1s linear -0.486s infinite;
    }
    .g-ball:nth-child(72) {
      width: 21px;
      height: 21px;
      left: calc(35px - 55px);
    }
    .g-ball:nth-child(72) {
      -webkit-animation: movetop 1s linear -1.886s infinite;
      animation: movetop 1s linear -1.886s infinite;
    }
    .g-ball:nth-child(73) {
      width: 34px;
      height: 34px;
      left: calc(13px - 55px);
    }
    .g-ball:nth-child(73) {
      -webkit-animation: movetop 1s linear -1.444s infinite;
      animation: movetop 1s linear -1.444s infinite;
    }
    .g-ball:nth-child(74) {
      width: 47px;
      height: 47px;
      left: calc(28px - 55px);
    }
    .g-ball:nth-child(74) {
      -webkit-animation: movetop 1s linear -0.434s infinite;
      animation: movetop 1s linear -0.434s infinite;
    }
    .g-ball:nth-child(75) {
      width: 23px;
      height: 23px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(75) {
      -webkit-animation: movetop 1s linear -0.895s infinite;
      animation: movetop 1s linear -0.895s infinite;
    }
    .g-ball:nth-child(76) {
      width: 10px;
      height: 10px;
      left: calc(27px - 55px);
    }
    .g-ball:nth-child(76) {
      -webkit-animation: movetop 1s linear -2.271s infinite;
      animation: movetop 1s linear -2.271s infinite;
    }
    .g-ball:nth-child(77) {
      width: 13px;
      height: 13px;
      left: calc(53px - 55px);
    }
    .g-ball:nth-child(77) {
      -webkit-animation: movetop 1s linear -0.133s infinite;
      animation: movetop 1s linear -0.133s infinite;
    }
    .g-ball:nth-child(78) {
      width: 35px;
      height: 35px;
      left: calc(2px - 55px);
    }
    .g-ball:nth-child(78) {
      -webkit-animation: movetop 1s linear -1.152s infinite;
      animation: movetop 1s linear -1.152s infinite;
    }
    .g-ball:nth-child(79) {
      width: 48px;
      height: 48px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(79) {
      -webkit-animation: movetop 1s linear -0.054s infinite;
      animation: movetop 1s linear -0.054s infinite;
    }
    .g-ball:nth-child(80) {
      width: 35px;
      height: 35px;
      left: calc(49px - 55px);
    }
    .g-ball:nth-child(80) {
      -webkit-animation: movetop 1s linear -2.274s infinite;
      animation: movetop 1s linear -2.274s infinite;
    }
    .g-ball:nth-child(81) {
      width: 35px;
      height: 35px;
      left: calc(40px - 55px);
    }
    .g-ball:nth-child(81) {
      -webkit-animation: movetop 1s linear -2.832s infinite;
      animation: movetop 1s linear -2.832s infinite;
    }
    .g-ball:nth-child(82) {
      width: 28px;
      height: 28px;
      left: calc(22px - 55px);
    }
    .g-ball:nth-child(82) {
      -webkit-animation: movetop 1s linear -1.861s infinite;
      animation: movetop 1s linear -1.861s infinite;
    }
    .g-ball:nth-child(83) {
      width: 20px;
      height: 20px;
      left: calc(46px - 55px);
    }
    .g-ball:nth-child(83) {
      -webkit-animation: movetop 1s linear -1.005s infinite;
      animation: movetop 1s linear -1.005s infinite;
    }
    .g-ball:nth-child(84) {
      width: 30px;
      height: 30px;
      left: calc(46px - 55px);
    }
    .g-ball:nth-child(84) {
      -webkit-animation: movetop 1s linear -1.404s infinite;
      animation: movetop 1s linear -1.404s infinite;
    }
    .g-ball:nth-child(85) {
      width: 12px;
      height: 12px;
      left: calc(44px - 55px);
    }
    .g-ball:nth-child(85) {
      -webkit-animation: movetop 1s linear -1.267s infinite;
      animation: movetop 1s linear -1.267s infinite;
    }
    .g-ball:nth-child(86) {
      width: 42px;
      height: 42px;
      left: calc(59px - 55px);
    }
    .g-ball:nth-child(86) {
      -webkit-animation: movetop 1s linear -2.358s infinite;
      animation: movetop 1s linear -2.358s infinite;
    }
    .g-ball:nth-child(87) {
      width: 18px;
      height: 18px;
      left: calc(65px - 55px);
    }
    .g-ball:nth-child(87) {
      -webkit-animation: movetop 1s linear -0.76s infinite;
      animation: movetop 1s linear -0.76s infinite;
    }
    .g-ball:nth-child(88) {
      width: 17px;
      height: 17px;
      left: calc(64px - 55px);
    }
    .g-ball:nth-child(88) {
      -webkit-animation: movetop 1s linear -2.695s infinite;
      animation: movetop 1s linear -2.695s infinite;
    }
    .g-ball:nth-child(89) {
      width: 18px;
      height: 18px;
      left: calc(25px - 55px);
    }
    .g-ball:nth-child(89) {
      -webkit-animation: movetop 1s linear -0.697s infinite;
      animation: movetop 1s linear -0.697s infinite;
    }
    .g-ball:nth-child(90) {
      width: 6px;
      height: 6px;
      left: calc(7px - 55px);
    }
    .g-ball:nth-child(90) {
      -webkit-animation: movetop 1s linear -1.2s infinite;
      animation: movetop 1s linear -1.2s infinite;
    }
    .g-ball:nth-child(91) {
      width: 31px;
      height: 31px;
      left: calc(49px - 55px);
    }
    .g-ball:nth-child(91) {
      -webkit-animation: movetop 1s linear -2.906s infinite;
      animation: movetop 1s linear -2.906s infinite;
    }
    .g-ball:nth-child(92) {
      width: 42px;
      height: 42px;
      left: calc(4px - 55px);
    }
    .g-ball:nth-child(92) {
      -webkit-animation: movetop 1s linear -2.278s infinite;
      animation: movetop 1s linear -2.278s infinite;
    }
    .g-ball:nth-child(93) {
      width: 18px;
      height: 18px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(93) {
      -webkit-animation: movetop 1s linear -1.52s infinite;
      animation: movetop 1s linear -1.52s infinite;
    }
    .g-ball:nth-child(94) {
      width: 47px;
      height: 47px;
      left: calc(64px - 55px);
    }
    .g-ball:nth-child(94) {
      -webkit-animation: movetop 1s linear -1.906s infinite;
      animation: movetop 1s linear -1.906s infinite;
    }
    .g-ball:nth-child(95) {
      width: 8px;
      height: 8px;
      left: calc(4px - 55px);
    }
    .g-ball:nth-child(95) {
      -webkit-animation: movetop 1s linear -2.985s infinite;
      animation: movetop 1s linear -2.985s infinite;
    }
    .g-ball:nth-child(96) {
      width: 22px;
      height: 22px;
      left: calc(36px - 55px);
    }
    .g-ball:nth-child(96) {
      -webkit-animation: movetop 1s linear -2.351s infinite;
      animation: movetop 1s linear -2.351s infinite;
    }
    .g-ball:nth-child(97) {
      width: 8px;
      height: 8px;
      left: calc(6px - 55px);
    }
    .g-ball:nth-child(97) {
      -webkit-animation: movetop 1s linear -1.799s infinite;
      animation: movetop 1s linear -1.799s infinite;
    }
    .g-ball:nth-child(98) {
      width: 36px;
      height: 36px;
      left: calc(44px - 55px);
    }
    .g-ball:nth-child(98) {
      -webkit-animation: movetop 1s linear -2.849s infinite;
      animation: movetop 1s linear -2.849s infinite;
    }
    .g-ball:nth-child(99) {
      width: 23px;
      height: 23px;
      left: calc(68px - 55px);
    }
    .g-ball:nth-child(99) {
      -webkit-animation: movetop 1s linear -1.139s infinite;
      animation: movetop 1s linear -1.139s infinite;
    }
    .g-ball:nth-child(100) {
      width: 5px;
      height: 5px;
      left: calc(7px - 55px);
    }
    .g-ball:nth-child(100) {
      -webkit-animation: movetop 1s linear -2.798s infinite;
      animation: movetop 1s linear -2.798s infinite;
    }
    .g-ball:nth-child(101) {
      width: 29px;
      height: 29px;
      left: calc(1px - 55px);
    }
    .g-ball:nth-child(101) {
      -webkit-animation: movetop 1s linear -2.331s infinite;
      animation: movetop 1s linear -2.331s infinite;
    }
    .g-ball:nth-child(102) {
      width: 42px;
      height: 42px;
      left: calc(65px - 55px);
    }
    .g-ball:nth-child(102) {
      -webkit-animation: movetop 1s linear -2.58s infinite;
      animation: movetop 1s linear -2.58s infinite;
    }
    .g-ball:nth-child(103) {
      width: 32px;
      height: 32px;
      left: calc(29px - 55px);
    }
    .g-ball:nth-child(103) {
      -webkit-animation: movetop 1s linear -0.628s infinite;
      animation: movetop 1s linear -0.628s infinite;
    }
    .g-ball:nth-child(104) {
      width: 45px;
      height: 45px;
      left: calc(23px - 55px);
    }
    .g-ball:nth-child(104) {
      -webkit-animation: movetop 1s linear -1.81s infinite;
      animation: movetop 1s linear -1.81s infinite;
    }
    .g-ball:nth-child(105) {
      width: 23px;
      height: 23px;
      left: calc(9px - 55px);
    }
    .g-ball:nth-child(105) {
      -webkit-animation: movetop 1s linear -0.057s infinite;
      animation: movetop 1s linear -0.057s infinite;
    }
    .g-ball:nth-child(106) {
      width: 43px;
      height: 43px;
      left: calc(28px - 55px);
    }
    .g-ball:nth-child(106) {
      -webkit-animation: movetop 1s linear -0.035s infinite;
      animation: movetop 1s linear -0.035s infinite;
    }
    .g-ball:nth-child(107) {
      width: 33px;
      height: 33px;
      left: calc(14px - 55px);
    }
    .g-ball:nth-child(107) {
      -webkit-animation: movetop 1s linear -1.578s infinite;
      animation: movetop 1s linear -1.578s infinite;
    }
    .g-ball:nth-child(108) {
      width: 3px;
      height: 3px;
      left: calc(5px - 55px);
    }
    .g-ball:nth-child(108) {
      -webkit-animation: movetop 1s linear -0.604s infinite;
      animation: movetop 1s linear -0.604s infinite;
    }
    .g-ball:nth-child(109) {
      width: 5px;
      height: 5px;
      left: calc(67px - 55px);
    }
    .g-ball:nth-child(109) {
      -webkit-animation: movetop 1s linear -1.139s infinite;
      animation: movetop 1s linear -1.139s infinite;
    }
    .g-ball:nth-child(110) {
      width: 34px;
      height: 34px;
      left: calc(23px - 55px);
    }
    .g-ball:nth-child(110) {
      -webkit-animation: movetop 1s linear -1.558s infinite;
      animation: movetop 1s linear -1.558s infinite;
    }
    .g-ball:nth-child(111) {
      width: 9px;
      height: 9px;
      left: calc(34px - 55px);
    }
    .g-ball:nth-child(111) {
      -webkit-animation: movetop 1s linear -2.169s infinite;
      animation: movetop 1s linear -2.169s infinite;
    }
    .g-ball:nth-child(112) {
      width: 13px;
      height: 13px;
      left: calc(31px - 55px);
    }
    .g-ball:nth-child(112) {
      -webkit-animation: movetop 1s linear -0.704s infinite;
      animation: movetop 1s linear -0.704s infinite;
    }
    .g-ball:nth-child(113) {
      width: 22px;
      height: 22px;
      left: calc(28px - 55px);
    }
    .g-ball:nth-child(113) {
      -webkit-animation: movetop 1s linear -0.683s infinite;
      animation: movetop 1s linear -0.683s infinite;
    }
    .g-ball:nth-child(114) {
      width: 18px;
      height: 18px;
      left: calc(41px - 55px);
    }
    .g-ball:nth-child(114) {
      -webkit-animation: movetop 1s linear -1.904s infinite;
      animation: movetop 1s linear -1.904s infinite;
    }
    .g-ball:nth-child(115) {
      width: 39px;
      height: 39px;
      left: calc(20px - 55px);
    }
    .g-ball:nth-child(115) {
      -webkit-animation: movetop 1s linear -2.744s infinite;
      animation: movetop 1s linear -2.744s infinite;
    }
    .g-ball:nth-child(116) {
      width: 9px;
      height: 9px;
      left: calc(58px - 55px);
    }
    .g-ball:nth-child(116) {
      -webkit-animation: movetop 1s linear -0.798s infinite;
      animation: movetop 1s linear -0.798s infinite;
    }
    .g-ball:nth-child(117) {
      width: 24px;
      height: 24px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(117) {
      -webkit-animation: movetop 1s linear -2.014s infinite;
      animation: movetop 1s linear -2.014s infinite;
    }
    .g-ball:nth-child(118) {
      width: 30px;
      height: 30px;
      left: calc(35px - 55px);
    }
    .g-ball:nth-child(118) {
      -webkit-animation: movetop 1s linear -1.417s infinite;
      animation: movetop 1s linear -1.417s infinite;
    }
    .g-ball:nth-child(119) {
      width: 34px;
      height: 34px;
      left: calc(13px - 55px);
    }
    .g-ball:nth-child(119) {
      -webkit-animation: movetop 1s linear -2.663s infinite;
      animation: movetop 1s linear -2.663s infinite;
    }
    .g-ball:nth-child(120) {
      width: 15px;
      height: 15px;
      left: calc(29px - 55px);
    }
    .g-ball:nth-child(120) {
      -webkit-animation: movetop 1s linear -2.908s infinite;
      animation: movetop 1s linear -2.908s infinite;
    }
    .g-ball:nth-child(121) {
      width: 16px;
      height: 16px;
      left: calc(47px - 55px);
    }
    .g-ball:nth-child(121) {
      -webkit-animation: movetop 1s linear -0.473s infinite;
      animation: movetop 1s linear -0.473s infinite;
    }
    .g-ball:nth-child(122) {
      width: 49px;
      height: 49px;
      left: calc(47px - 55px);
    }
    .g-ball:nth-child(122) {
      -webkit-animation: movetop 1s linear -2.901s infinite;
      animation: movetop 1s linear -2.901s infinite;
    }
    .g-ball:nth-child(123) {
      width: 20px;
      height: 20px;
      left: calc(34px - 55px);
    }
    .g-ball:nth-child(123) {
      -webkit-animation: movetop 1s linear -2.279s infinite;
      animation: movetop 1s linear -2.279s infinite;
    }
    .g-ball:nth-child(124) {
      width: 11px;
      height: 11px;
      left: calc(60px - 55px);
    }
    .g-ball:nth-child(124) {
      -webkit-animation: movetop 1s linear -2.473s infinite;
      animation: movetop 1s linear -2.473s infinite;
    }
    .g-ball:nth-child(125) {
      width: 40px;
      height: 40px;
      left: calc(52px - 55px);
    }
    .g-ball:nth-child(125) {
      -webkit-animation: movetop 1s linear -2.376s infinite;
      animation: movetop 1s linear -2.376s infinite;
    }
    .g-ball:nth-child(126) {
      width: 43px;
      height: 43px;
      left: calc(64px - 55px);
    }
    .g-ball:nth-child(126) {
      -webkit-animation: movetop 1s linear -1.274s infinite;
      animation: movetop 1s linear -1.274s infinite;
    }
    .g-ball:nth-child(127) {
      width: 18px;
      height: 18px;
      left: calc(58px - 55px);
    }
    .g-ball:nth-child(127) {
      -webkit-animation: movetop 1s linear -0.465s infinite;
      animation: movetop 1s linear -0.465s infinite;
    }
    .g-ball:nth-child(128) {
      width: 43px;
      height: 43px;
      left: calc(63px - 55px);
    }
    .g-ball:nth-child(128) {
      -webkit-animation: movetop 1s linear -1.243s infinite;
      animation: movetop 1s linear -1.243s infinite;
    }
    .g-ball:nth-child(129) {
      width: 40px;
      height: 40px;
      left: calc(66px - 55px);
    }
    .g-ball:nth-child(129) {
      -webkit-animation: movetop 1s linear -0.771s infinite;
      animation: movetop 1s linear -0.771s infinite;
    }
    .g-ball:nth-child(130) {
      width: 50px;
      height: 50px;
      left: calc(52px - 55px);
    }
    .g-ball:nth-child(130) {
      -webkit-animation: movetop 1s linear -2.198s infinite;
      animation: movetop 1s linear -2.198s infinite;
    }
    .g-ball:nth-child(131) {
      width: 32px;
      height: 32px;
      left: calc(57px - 55px);
    }
    .g-ball:nth-child(131) {
      -webkit-animation: movetop 1s linear -1.244s infinite;
      animation: movetop 1s linear -1.244s infinite;
    }
    .g-ball:nth-child(132) {
      width: 17px;
      height: 17px;
      left: calc(28px - 55px);
    }
    .g-ball:nth-child(132) {
      -webkit-animation: movetop 1s linear -1.88s infinite;
      animation: movetop 1s linear -1.88s infinite;
    }
    .g-ball:nth-child(133) {
      width: 47px;
      height: 47px;
      left: calc(9px - 55px);
    }
    .g-ball:nth-child(133) {
      -webkit-animation: movetop 1s linear -0.201s infinite;
      animation: movetop 1s linear -0.201s infinite;
    }
    .g-ball:nth-child(134) {
      width: 24px;
      height: 24px;
      left: calc(21px - 55px);
    }
    .g-ball:nth-child(134) {
      -webkit-animation: movetop 1s linear -2.456s infinite;
      animation: movetop 1s linear -2.456s infinite;
    }
    .g-ball:nth-child(135) {
      width: 32px;
      height: 32px;
      left: calc(40px - 55px);
    }
    .g-ball:nth-child(135) {
      -webkit-animation: movetop 1s linear -2.666s infinite;
      animation: movetop 1s linear -2.666s infinite;
    }
    .g-ball:nth-child(136) {
      width: 10px;
      height: 10px;
      left: calc(54px - 55px);
    }
    .g-ball:nth-child(136) {
      -webkit-animation: movetop 1s linear -2.738s infinite;
      animation: movetop 1s linear -2.738s infinite;
    }
    .g-ball:nth-child(137) {
      width: 26px;
      height: 26px;
      left: calc(11px - 55px);
    }
    .g-ball:nth-child(137) {
      -webkit-animation: movetop 1s linear -1.631s infinite;
      animation: movetop 1s linear -1.631s infinite;
    }
    .g-ball:nth-child(138) {
      width: 31px;
      height: 31px;
      left: calc(69px - 55px);
    }
    .g-ball:nth-child(138) {
      -webkit-animation: movetop 1s linear -0.036s infinite;
      animation: movetop 1s linear -0.036s infinite;
    }
    .g-ball:nth-child(139) {
      width: 26px;
      height: 26px;
      left: calc(9px - 55px);
    }
    .g-ball:nth-child(139) {
      -webkit-animation: movetop 1s linear -1.974s infinite;
      animation: movetop 1s linear -1.974s infinite;
    }
    .g-ball:nth-child(140) {
      width: 38px;
      height: 38px;
      left: calc(8px - 55px);
    }
    .g-ball:nth-child(140) {
      -webkit-animation: movetop 1s linear -1.175s infinite;
      animation: movetop 1s linear -1.175s infinite;
    }
    .g-ball:nth-child(141) {
      width: 4px;
      height: 4px;
      left: calc(2px - 55px);
    }
    .g-ball:nth-child(141) {
      -webkit-animation: movetop 1s linear -1.198s infinite;
      animation: movetop 1s linear -1.198s infinite;
    }
    .g-ball:nth-child(142) {
      width: 11px;
      height: 11px;
      left: calc(45px - 55px);
    }
    .g-ball:nth-child(142) {
      -webkit-animation: movetop 1s linear -0.927s infinite;
      animation: movetop 1s linear -0.927s infinite;
    }
    .g-ball:nth-child(143) {
      width: 5px;
      height: 5px;
      left: calc(10px - 55px);
    }
    .g-ball:nth-child(143) {
      -webkit-animation: movetop 1s linear -2.663s infinite;
      animation: movetop 1s linear -2.663s infinite;
    }
    .g-ball:nth-child(144) {
      width: 13px;
      height: 13px;
      left: calc(62px - 55px);
    }
    .g-ball:nth-child(144) {
      -webkit-animation: movetop 1s linear -1.996s infinite;
      animation: movetop 1s linear -1.996s infinite;
    }
    .g-ball:nth-child(145) {
      width: 36px;
      height: 36px;
      left: calc(13px - 55px);
    }
    .g-ball:nth-child(145) {
      -webkit-animation: movetop 1s linear -1.991s infinite;
      animation: movetop 1s linear -1.991s infinite;
    }
    .g-ball:nth-child(146) {
      width: 43px;
      height: 43px;
      left: calc(55px - 55px);
    }
    .g-ball:nth-child(146) {
      -webkit-animation: movetop 1s linear -2.156s infinite;
      animation: movetop 1s linear -2.156s infinite;
    }
    .g-ball:nth-child(147) {
      width: 41px;
      height: 41px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(147) {
      -webkit-animation: movetop 1s linear -0.252s infinite;
      animation: movetop 1s linear -0.252s infinite;
    }
    .g-ball:nth-child(148) {
      width: 1px;
      height: 1px;
      left: calc(52px - 55px);
    }
    .g-ball:nth-child(148) {
      -webkit-animation: movetop 1s linear -2.439s infinite;
      animation: movetop 1s linear -2.439s infinite;
    }
    .g-ball:nth-child(149) {
      width: 12px;
      height: 12px;
      left: calc(58px - 55px);
    }
    .g-ball:nth-child(149) {
      -webkit-animation: movetop 1s linear -2.07s infinite;
      animation: movetop 1s linear -2.07s infinite;
    }
    .g-ball:nth-child(150) {
      width: 35px;
      height: 35px;
      left: calc(11px - 55px);
    }
    .g-ball:nth-child(150) {
      -webkit-animation: movetop 1s linear -2.068s infinite;
      animation: movetop 1s linear -2.068s infinite;
    }
    .g-ball:nth-child(151) {
      width: 32px;
      height: 32px;
      left: calc(63px - 55px);
    }
    .g-ball:nth-child(151) {
      -webkit-animation: movetop 1s linear -0.481s infinite;
      animation: movetop 1s linear -0.481s infinite;
    }
    .g-ball:nth-child(152) {
      width: 42px;
      height: 42px;
      left: calc(23px - 55px);
    }
    .g-ball:nth-child(152) {
      -webkit-animation: movetop 1s linear -1.556s infinite;
      animation: movetop 1s linear -1.556s infinite;
    }
    .g-ball:nth-child(153) {
      width: 7px;
      height: 7px;
      left: calc(55px - 55px);
    }
    .g-ball:nth-child(153) {
      -webkit-animation: movetop 1s linear -1.653s infinite;
      animation: movetop 1s linear -1.653s infinite;
    }
    .g-ball:nth-child(154) {
      width: 24px;
      height: 24px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(154) {
      -webkit-animation: movetop 1s linear -2.877s infinite;
      animation: movetop 1s linear -2.877s infinite;
    }
    .g-ball:nth-child(155) {
      width: 28px;
      height: 28px;
      left: calc(2px - 55px);
    }
    .g-ball:nth-child(155) {
      -webkit-animation: movetop 1s linear -0.372s infinite;
      animation: movetop 1s linear -0.372s infinite;
    }
    .g-ball:nth-child(156) {
      width: 27px;
      height: 27px;
      left: calc(31px - 55px);
    }
    .g-ball:nth-child(156) {
      -webkit-animation: movetop 1s linear -1.995s infinite;
      animation: movetop 1s linear -1.995s infinite;
    }
    .g-ball:nth-child(157) {
      width: 48px;
      height: 48px;
      left: calc(47px - 55px);
    }
    .g-ball:nth-child(157) {
      -webkit-animation: movetop 1s linear -2.608s infinite;
      animation: movetop 1s linear -2.608s infinite;
    }
    .g-ball:nth-child(158) {
      width: 24px;
      height: 24px;
      left: calc(63px - 55px);
    }
    .g-ball:nth-child(158) {
      -webkit-animation: movetop 1s linear -2.916s infinite;
      animation: movetop 1s linear -2.916s infinite;
    }
    .g-ball:nth-child(159) {
      width: 22px;
      height: 22px;
      left: calc(21px - 55px);
    }
    .g-ball:nth-child(159) {
      -webkit-animation: movetop 1s linear -1.445s infinite;
      animation: movetop 1s linear -1.445s infinite;
    }
    .g-ball:nth-child(160) {
      width: 44px;
      height: 44px;
      left: calc(23px - 55px);
    }
    .g-ball:nth-child(160) {
      -webkit-animation: movetop 1s linear -1.478s infinite;
      animation: movetop 1s linear -1.478s infinite;
    }
    .g-ball:nth-child(161) {
      width: 10px;
      height: 10px;
      left: calc(37px - 55px);
    }
    .g-ball:nth-child(161) {
      -webkit-animation: movetop 1s linear -0.457s infinite;
      animation: movetop 1s linear -0.457s infinite;
    }
    .g-ball:nth-child(162) {
      width: 26px;
      height: 26px;
      left: calc(59px - 55px);
    }
    .g-ball:nth-child(162) {
      -webkit-animation: movetop 1s linear -0.646s infinite;
      animation: movetop 1s linear -0.646s infinite;
    }
    .g-ball:nth-child(163) {
      width: 38px;
      height: 38px;
      left: calc(5px - 55px);
    }
    .g-ball:nth-child(163) {
      -webkit-animation: movetop 1s linear -0.311s infinite;
      animation: movetop 1s linear -0.311s infinite;
    }
    .g-ball:nth-child(164) {
      width: 31px;
      height: 31px;
      left: calc(64px - 55px);
    }
    .g-ball:nth-child(164) {
      -webkit-animation: movetop 1s linear -0.307s infinite;
      animation: movetop 1s linear -0.307s infinite;
    }
    .g-ball:nth-child(165) {
      width: 13px;
      height: 13px;
      left: calc(41px - 55px);
    }
    .g-ball:nth-child(165) {
      -webkit-animation: movetop 1s linear -2.836s infinite;
      animation: movetop 1s linear -2.836s infinite;
    }
    .g-ball:nth-child(166) {
      width: 40px;
      height: 40px;
      left: calc(59px - 55px);
    }
    .g-ball:nth-child(166) {
      -webkit-animation: movetop 1s linear -0.273s infinite;
      animation: movetop 1s linear -0.273s infinite;
    }
    .g-ball:nth-child(167) {
      width: 16px;
      height: 16px;
      left: calc(61px - 55px);
    }
    .g-ball:nth-child(167) {
      -webkit-animation: movetop 1s linear -2.26s infinite;
      animation: movetop 1s linear -2.26s infinite;
    }
    .g-ball:nth-child(168) {
      width: 43px;
      height: 43px;
      left: calc(4px - 55px);
    }
    .g-ball:nth-child(168) {
      -webkit-animation: movetop 1s linear -0.967s infinite;
      animation: movetop 1s linear -0.967s infinite;
    }
    .g-ball:nth-child(169) {
      width: 27px;
      height: 27px;
      left: calc(56px - 55px);
    }
    .g-ball:nth-child(169) {
      -webkit-animation: movetop 1s linear -0.304s infinite;
      animation: movetop 1s linear -0.304s infinite;
    }
    .g-ball:nth-child(170) {
      width: 42px;
      height: 42px;
      left: calc(28px - 55px);
    }
    .g-ball:nth-child(170) {
      -webkit-animation: movetop 1s linear -2.472s infinite;
      animation: movetop 1s linear -2.472s infinite;
    }
    .g-ball:nth-child(171) {
      width: 48px;
      height: 48px;
      left: calc(44px - 55px);
    }
    .g-ball:nth-child(171) {
      -webkit-animation: movetop 1s linear -2.946s infinite;
      animation: movetop 1s linear -2.946s infinite;
    }
    .g-ball:nth-child(172) {
      width: 40px;
      height: 40px;
      left: calc(4px - 55px);
    }
    .g-ball:nth-child(172) {
      -webkit-animation: movetop 1s linear -1.307s infinite;
      animation: movetop 1s linear -1.307s infinite;
    }
    .g-ball:nth-child(173) {
      width: 22px;
      height: 22px;
      left: calc(8px - 55px);
    }
    .g-ball:nth-child(173) {
      -webkit-animation: movetop 1s linear -0.124s infinite;
      animation: movetop 1s linear -0.124s infinite;
    }
    .g-ball:nth-child(174) {
      width: 32px;
      height: 32px;
      left: calc(43px - 55px);
    }
    .g-ball:nth-child(174) {
      -webkit-animation: movetop 1s linear -1.058s infinite;
      animation: movetop 1s linear -1.058s infinite;
    }
    .g-ball:nth-child(175) {
      width: 15px;
      height: 15px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(175) {
      -webkit-animation: movetop 1s linear -1.847s infinite;
      animation: movetop 1s linear -1.847s infinite;
    }
    .g-ball:nth-child(176) {
      width: 41px;
      height: 41px;
      left: calc(27px - 55px);
    }
    .g-ball:nth-child(176) {
      -webkit-animation: movetop 1s linear -1.064s infinite;
      animation: movetop 1s linear -1.064s infinite;
    }
    .g-ball:nth-child(177) {
      width: 26px;
      height: 26px;
      left: calc(53px - 55px);
    }
    .g-ball:nth-child(177) {
      -webkit-animation: movetop 1s linear -0.503s infinite;
      animation: movetop 1s linear -0.503s infinite;
    }
    .g-ball:nth-child(178) {
      width: 43px;
      height: 43px;
      left: calc(41px - 55px);
    }
    .g-ball:nth-child(178) {
      -webkit-animation: movetop 1s linear -2.727s infinite;
      animation: movetop 1s linear -2.727s infinite;
    }
    .g-ball:nth-child(179) {
      width: 42px;
      height: 42px;
      left: calc(23px - 55px);
    }
    .g-ball:nth-child(179) {
      -webkit-animation: movetop 1s linear -0.61s infinite;
      animation: movetop 1s linear -0.61s infinite;
    }
    .g-ball:nth-child(180) {
      width: 38px;
      height: 38px;
      left: calc(46px - 55px);
    }
    .g-ball:nth-child(180) {
      -webkit-animation: movetop 1s linear -2.139s infinite;
      animation: movetop 1s linear -2.139s infinite;
    }
    .g-ball:nth-child(181) {
      width: 8px;
      height: 8px;
      left: calc(58px - 55px);
    }
    .g-ball:nth-child(181) {
      -webkit-animation: movetop 1s linear -1.636s infinite;
      animation: movetop 1s linear -1.636s infinite;
    }
    .g-ball:nth-child(182) {
      width: 46px;
      height: 46px;
      left: calc(33px - 55px);
    }
    .g-ball:nth-child(182) {
      -webkit-animation: movetop 1s linear -2.234s infinite;
      animation: movetop 1s linear -2.234s infinite;
    }
    .g-ball:nth-child(183) {
      width: 19px;
      height: 19px;
      left: calc(32px - 55px);
    }
    .g-ball:nth-child(183) {
      -webkit-animation: movetop 1s linear -1.332s infinite;
      animation: movetop 1s linear -1.332s infinite;
    }
    .g-ball:nth-child(184) {
      width: 6px;
      height: 6px;
      left: calc(9px - 55px);
    }
    .g-ball:nth-child(184) {
      -webkit-animation: movetop 1s linear -1.979s infinite;
      animation: movetop 1s linear -1.979s infinite;
    }
    .g-ball:nth-child(185) {
      width: 35px;
      height: 35px;
      left: calc(37px - 55px);
    }
    .g-ball:nth-child(185) {
      -webkit-animation: movetop 1s linear -0.393s infinite;
      animation: movetop 1s linear -0.393s infinite;
    }
    .g-ball:nth-child(186) {
      width: 48px;
      height: 48px;
      left: calc(25px - 55px);
    }
    .g-ball:nth-child(186) {
      -webkit-animation: movetop 1s linear -2.795s infinite;
      animation: movetop 1s linear -2.795s infinite;
    }
    .g-ball:nth-child(187) {
      width: 14px;
      height: 14px;
      left: calc(26px - 55px);
    }
    .g-ball:nth-child(187) {
      -webkit-animation: movetop 1s linear -2.019s infinite;
      animation: movetop 1s linear -2.019s infinite;
    }
    .g-ball:nth-child(188) {
      width: 25px;
      height: 25px;
      left: calc(24px - 55px);
    }
    .g-ball:nth-child(188) {
      -webkit-animation: movetop 1s linear -1.929s infinite;
      animation: movetop 1s linear -1.929s infinite;
    }
    .g-ball:nth-child(189) {
      width: 1px;
      height: 1px;
      left: calc(39px - 55px);
    }
    .g-ball:nth-child(189) {
      -webkit-animation: movetop 1s linear -2.742s infinite;
      animation: movetop 1s linear -2.742s infinite;
    }
    .g-ball:nth-child(190) {
      width: 1px;
      height: 1px;
      left: calc(25px - 55px);
    }
    .g-ball:nth-child(190) {
      -webkit-animation: movetop 1s linear -1.719s infinite;
      animation: movetop 1s linear -1.719s infinite;
    }
    .g-ball:nth-child(191) {
      width: 10px;
      height: 10px;
      left: calc(35px - 55px);
    }
    .g-ball:nth-child(191) {
      -webkit-animation: movetop 1s linear -2.729s infinite;
      animation: movetop 1s linear -2.729s infinite;
    }
    .g-ball:nth-child(192) {
      width: 46px;
      height: 46px;
      left: calc(47px - 55px);
    }
    .g-ball:nth-child(192) {
      -webkit-animation: movetop 1s linear -0.477s infinite;
      animation: movetop 1s linear -0.477s infinite;
    }
    .g-ball:nth-child(193) {
      width: 24px;
      height: 24px;
      left: calc(12px - 55px);
    }
    .g-ball:nth-child(193) {
      -webkit-animation: movetop 1s linear -2.971s infinite;
      animation: movetop 1s linear -2.971s infinite;
    }
    .g-ball:nth-child(194) {
      width: 16px;
      height: 16px;
      left: calc(70px - 55px);
    }
    .g-ball:nth-child(194) {
      -webkit-animation: movetop 1s linear -1.495s infinite;
      animation: movetop 1s linear -1.495s infinite;
    }
    .g-ball:nth-child(195) {
      width: 13px;
      height: 13px;
      left: calc(57px - 55px);
    }
    .g-ball:nth-child(195) {
      -webkit-animation: movetop 1s linear -2.723s infinite;
      animation: movetop 1s linear -2.723s infinite;
    }
    .g-ball:nth-child(196) {
      width: 48px;
      height: 48px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(196) {
      -webkit-animation: movetop 1s linear -1.751s infinite;
      animation: movetop 1s linear -1.751s infinite;
    }
    .g-ball:nth-child(197) {
      width: 22px;
      height: 22px;
      left: calc(14px - 55px);
    }
    .g-ball:nth-child(197) {
      -webkit-animation: movetop 1s linear -2.097s infinite;
      animation: movetop 1s linear -2.097s infinite;
    }
    .g-ball:nth-child(198) {
      width: 35px;
      height: 35px;
      left: calc(4px - 55px);
    }
    .g-ball:nth-child(198) {
      -webkit-animation: movetop 1s linear -0.811s infinite;
      animation: movetop 1s linear -0.811s infinite;
    }
    .g-ball:nth-child(199) {
      width: 34px;
      height: 34px;
      left: calc(16px - 55px);
    }
    .g-ball:nth-child(199) {
      -webkit-animation: movetop 1s linear -2.937s infinite;
      animation: movetop 1s linear -2.937s infinite;
    }
    @-webkit-keyframes movetop {
      0% {
        transform: translate(0, 0);
      }
      20% {
        transform: translate(0, 0);
      }
      87.7% {
        transform: translate(0, -170px);
        opacity: 0;
      }
      100% {
        transform: translate(0, -170px);
        opacity: 0;
      }
    }
    @keyframes movetop {
      0% {
        transform: translate(0, 0);
      }
      20% {
        transform: translate(0, 0);
      }
      87.7% {
        transform: translate(0, -170px);
        opacity: 0;
      }
      100% {
        transform: translate(0, -170px);
        opacity: 0;
      }
    }
  </style>
  <script>
    window.console = window.console || function (t) { };
  </script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>
<body translate="no">
  <div>
    <div></div>
    <div>
      <div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
      </div>
    </div>
  </div>
  <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div></div>
    <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;"></a>
  </div>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css如何制作逼真的蜡烛火焰动画效果?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!


相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01