粒子分解

下载代码

html

css

分享到微信朋友圈

html

<div class='bc'>
  <div class='c'>
    <div class='a'>改变形状</div>
    <div class='a'>随机颜色</div>
    <div class='a'>放大</div>
  </div>
  <div class='t'>Click me</div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
  <div class='b'></div>
</div>
<div class='rc'>
  <div class='re'></div>
</div>

css

html {
  overflow: hidden;
  -moz-user-select: none;
  user-select: none;
  background-color: #0d0d0d;
}
html body {
  margin: 0;
}

.c {
  width: 20em;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  position: absolute;
  display: flex;
  left: 50%;
  bottom: 6em;
  transform: translateX(-50%);
}
.c .a {
  flex-grow: 1;
  text-align: center;
  color: white;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
  padding: 0.6em 1em 0.6em 1em;
  font-size: 12px;
  font-family: arial;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 1s;
}
.c .a:nth-child(even) {
  margin: 0 0.2em 0 0.2em;
}

.bc {
  cursor: pointer;
  position: absolute;
  width: 220px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.bc .b {
  position: relative;
  height: 4px;
  width: 4px;
  z-index: 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}
.bc .t {
  z-index: 1;
  display: block;
  position: absolute;
  color: white;
  font-family: "Anton", sans-serif;
  font-size: 22px;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 1.1em 0 1.1em 0;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.rc {
  visibility: hidden;
  cursor: pointer;
  padding: 1em;
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rc .re {
  width: 50px;
  height: 30px;
}
.rc .re:before {
  content: "";
  position: absolute;
  border-top: 15px solid transparent;
  border-right: 25px solid white;
  border-bottom: 15px solid transparent;
}
.rc .re:after {
  content: "";
  position: absolute;
  left: 30px;
  border-top: 15px solid transparent;
  border-right: 25px solid white;
  border-bottom: 15px solid transparent;
}

.round {
  border-radius: 4px;
}

.active {
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)) !important;
}

.scale {
  zoom: 200%;
}

JavaScript

maxTime = 1500 // Adjust speed here
colors = ["#16a085", "#27ae60", "#2980b9", "#f1c40f", "#8e44ad", "#f39c12", "#d35400", "#c0392b"] // Main Color
//colors = ["#34495e", "#2c3e50"] //Blue camo
//colors = ["#604439","#9e9a75","#1c222e","#41533b","#554840"] //Camo

$(".rc").hide()
clicked = false

function cCnP() {
  dH = $(document).height() 
  iH = $(".bc").height()
  fallMath = dH/2 + iH/2
  $(".b").each(function(i) {
    rCm = colors[Math.floor((Math.random() * colors.length) + 0)]
    $(this).css("background-color", rCm)
  })
}

$(".bc .t").click(function() {
  if (clicked == true) { return false }
  $(".bc .t").fadeOut(300)
  setTimeout(function(){
    $(".rc").fadeIn(500)
  }, maxTime)
  $(".b").each(function() {
    $(this).animate({
      top: ""+fallMath+"px"
    }, Math.floor((Math.random() * maxTime) + 1000))
  })
  clicked = true
})

$(".rc").click(function() {
  if (clicked == false) { return false }
  $(".rc").fadeOut(300)
  setTimeout(function(){
    $(".bc .t").fadeIn(500)
  }, maxTime)
  $(".b").each(function() {
    $(this).animate({
      top: "0px"
    }, Math.floor((Math.random() * maxTime) + 1000))
  })
  clicked = false
})

$(".a:nth-child(1)").click(function() {
  $(".b").toggleClass("round")
  $(this).toggleClass("active")
})

$(".a:nth-child(2)").click(function() {
  rC = 0
  do {
    colors[rC] = "rgb("+Math.floor((Math.random() * 255) + 1)+","+Math.floor((Math.random() * 255) + 1)+","+Math.floor((Math.random() * 255) + 1)+")"
    rC = rC + 1
  } while(rC != 7)
  cCnP()
})

$(".a:nth-child(3)").click(function() {
  $(".bc").toggleClass("scale")
  $(this).toggleClass("active")
})

$(window).resize(function() {
  dH = $(document).height() 
  iH = $(".bc").height()
  fallMath = dH/2 + iH/2
})

$(".rc").css("visibility", "visible")
cCnP()

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