js+css3催眠波纹动画特效

一款js+css3实现的带有弹跳波纹波浪效果，具有催眠效果的波纹动画特效。

js代码

<script type="text/javascript">
function getRandomNumber() {
  return Math.floor(Math.random() * 255);
}

function getBrightness(r, b, g) {
  // brightness calculation from http://alienryderflex.com/hsp.html
  return Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
  );
}

setInterval(()=> {
  const r = getRandomNumber(),
        g = getRandomNumber(),
        b = getRandomNumber(),
        brightness = getBrightness(r,g,b);
  
  document.documentElement.style.setProperty(`--r`, r);
  document.documentElement.style.setProperty(`--g`, g);
  document.documentElement.style.setProperty(`--b`, b);
  
  let bgColor;
  if (brightness > 40) {
    bgColor = '#121212';
  } else {
    bgColor = '#BDBCBF';
  }
  document.documentElement.style.setProperty(`--bg`, bgColor);
}, 2000);
</script>

在线预览
资源均来自第三方，谨慎下载，前往第三方网站下载