Js炫彩射线动态背景-一个基于tailwindcss的动态背景

该特效适合放在官网首页，根据具体情况适用，下面是代码具体参数配置看代码注释

var ele=document.createElement('main');
ele.style="margin: 0 auto;height: 100vh;width: 100vw;position: fixed;pointer-events: none;top: 0;overflow: hidden;z-index: -1;"
ele.innerHTML=`
  <main>
      <div class="relative flex flex-col h-[100vh] items-center justify-center bg-white dark:bg-black transition-bg">
          <div class="absolute inset-0 overflow-hidden">
              <div class="jumbo absolute -inset-[10px] opacity-50"></div>
          </div>
      </div>
  </main>
`;
document.body.appendChild(ele);
 
var ele=document.createElement('style');
ele.setAttribute("type","text/css")
ele.innerHTML=`
  /*
  NOTE: This is just an experiment and
        could use some changes to improve performance:
 
  https://x.com/actualTimWilson/status/1730753841795158313
 
  See a production optimized version here: https://charmui.com
  */
 
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 
  body {
      font-family: Inter, sans-serif;
  }
 
  @-webkit-keyframes jumbo {
      from {
          background-position: 50% 50%, 50% 50%;
      }
      to {
          background-position: 350% 50%, 350% 50%;
      }
  }
 
  @keyframes jumbo {
    from {
      background-position: 50% 50%, 50% 50%;
    }
    to {
      background-position: 350% 50%, 350% 50%;
    }
  }
 
  .jumbo {
    --stripes: repeating-linear-gradient(
      100deg,
      #fff 0%,
      #fff 7%,
      transparent 10%,
      transparent 12%,
      #fff 16%
    );
    --stripesDark: repeating-linear-gradient(
      100deg,
      #000 0%,
      #000 7%,
      transparent 10%,
      transparent 12%,
      #000 16%
    );
    --rainbow: repeating-linear-gradient(
      100deg,
      #60a5fa 10%,
      #e879f9 15%,
      #60a5fa 20%,
      #5eead4 25%,
      #60a5fa 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;
    filter: blur(10px) invert(100%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    pointer-events: none;
  }
 
  .jumbo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    -webkit-animation: jumbo 60s linear infinite;
    animation: jumbo 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
  }
 
  .dark .jumbo {
      background-image: var(--stripesDark), var(--rainbow);
      filter: blur(10px) opacity(50%) saturate(200%);
  }
  .dark .jumbo::after {
      background-image: var(--stripesDark), var(--rainbow);
  }
`;
document.body.appendChild(ele);
 
 
function loadJs(path,callback){
  var header=document.getElementsByTagName("head")[0];
  var script=document.createElement('script');
  script.setAttribute('src',path);
  header.appendChild(script);
  //对于浏览器的判断是ie还是其他
  if(!/*@cc_on!@*/false){
      script.onload=function(){
        console.log("非ie");
        callback();
      }
  }else{
    script.onreadystatechange=function(){
      if(script.readystate=="loaded" ||script.readState=='complate'){
        console.log("ie");
        callback();
      }
    }
  }
}
loadJs("https://bk.yyge.net/Jsdata/js/tailwindcss_3.4.1.js",function(){
  tailwind.config = {
    darkMode: "class",
  }
})