圆形网格分层循环

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<main class="wrapper">
  <div class="row">
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
  </div>
  <div class="row">
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
  </div>
  <div class="row">
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
  </div>
  <div class="row">
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
  </div>
  <div class="row">
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
    <div class="circ"></div>
  </div>
</main>

<main class="wrapper2">
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
  <div class="row">
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
    <div class="circ2"></div>
  </div>
</main>

<main class="wrapper3">
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
  <div class="row">
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
    <div class="circ3"></div>
  </div>
</main>

css

JavaScript

// 1

anime({
  targets: ".circ",
  scale: [
    {
      value: 0.5,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    },
    {
      value: 1.5,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    },
    {
      value: 1,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    }
  ],
  delay: anime.stagger(200, {
    grid: [5, 5],
    from: "center"
  }),
  loop: true
});

// 2

anime({
  targets: ".circ2",
  scale: [
    {
      value: 0.25,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    },
    {
      value: 2,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    },
    {
      value: 1,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    }
  ],
  delay: anime.stagger(200, {
    grid: [7, 7],
    from: "center"
  }),
  loop: true
});

// 3

anime({
  targets: ".circ3",
  scale: [
    {
      value: 2,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    },
    {
      value: 0.5,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    },
    {
      value: 1,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 500
    }
  ],
  delay: anime.stagger(200, {
    grid: [9, 9],
    from: "center"
  }),
  loop: true
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>圆形网格分层循环-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号