注册 登录 充值会员 退出
毕业设计 PHP源码
充值

js+css3催眠波纹动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-06-12
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>