CSS灯光效果，背景黑金效果

news2024/10/6 10:33:56

先看效果
在这里插入图片描述
再看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯光效果</title>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&amp;display=swap" type="text/css" rel="Stylesheets">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    :root {
      --glitter: url("https://assets.codepen.io/13471/silver-glitter-background.png");
      --ratio-x: .5;
      --ratio-y: .75;
      --from-center: .5;
    }

    main {
      --bgoffsetx: calc( 2.9px * var(--ratio-x));
      --bgoffsety: calc( 4.3px * var(--ratio-y));
      --pointerx: calc( 100% * var(--ratio-x));
      --pointery: calc( 100% * var(--ratio-y));
      --h: calc( 360deg * var( --from-center ) );
      --s: calc( 90% * var( --from-center ) );
      background: linear-gradient(135deg, hsl(28deg, var(--s), 15%), hsl(198deg, var(--s), 15%)), var(--glitter), var(--glitter), radial-gradient(farthest-corner circle at var(--pointerx) var(--pointery), white 20px, rgba(237, 222, 222, 0.38) 150px, black 65%);
      background-position: calc( 70% + var(--bgoffsetx) ) calc( 70% + var(--bgoffsety) ), calc( 30% - var(--bgoffsetx) ) calc( 30% - var(--bgoffsety) );
      background-size: cover, 560px auto, 400px auto, cover;
      background-blend-mode: overlay, multiply, color, overlay;
      transition: opacity 4s ease-out;
    }

    main.loading {
      opacity: 0;
    }

    main {
      image-rendering: optimizeQuality;
      transform: translate3d(0, 0, 0.01px);
    }

    main * {
      pointer-events: none;
      text-anchor: middle;
    }

    main svg {
      mix-blend-mode: color-dodge;
      fill: #908190;
      opacity: calc( 1.5 - var(--from-center) );
      filter: drop-shadow(0 0 30px black) drop-shadow(0 0 10px black) brightness(1.3);
    }

    body {
      color: black;
      background: black;
      font-family: "Cinzel", sans-serif;
    }

    html, body, main {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      display: grid;
      place-items: center;
      grid-row: 1;
    }

    img {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .social-icon {
      stroke-width: 1.25;
      stroke: cyan;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      z-index: 10;
      -webkit-animation: iconsLoad 10s ease both 1s;
      animation: iconsLoad 10s ease both 1s;
    }

    .social-icon.twitter {
      right: 40px;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
    }

    @-webkit-keyframes iconsLoad {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes iconsLoad {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
<main id=app class=loading>
  <svg viewBox="-50 0 100 20">
    <text x="0" y="15">Illuminate</text>
  </svg>
</main>
<img src="https://assets.codepen.io/13471/silver-glitter-background.png" loading=lazy>

<a class="social-icon github" href="https://blog.csdn.net/qq_35241329?type=blog">
  <svg viewBox="0 0 24 24">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
  </svg>
</a>
</body>
<script>

  // 👆鼠标移动跟随代码
  $("main").on("pointermove", (e) => {
    interacted = true;
    const { x, y } = e.originalEvent;
    const BOX = e.target.getBoundingClientRect();
    const POINT = { x: x - BOX.x, y: y - BOX.y };
    const RATIO = { x: POINT.x / BOX.width, y: POINT.y / BOX.height };
    const CENTER = fromCenter( RATIO );
    // 设置css中引用的一些css变量
    e.target.style.setProperty( "--ratio-x", RATIO.x );
    e.target.style.setProperty( "--ratio-y", RATIO.y );
    e.target.style.setProperty( "--from-center", CENTER );
  });

  // 数字 🤷‍♀️
  function fromCenter({ x, y }) {
    return Math.min(Math.max( 0, Math.sqrt( (y - .5) * (y - .5) + (x  - .5) * (x - .5) ) / .5 ), 1 );
  }
  let interacted = false;
  $("img").on("load", () => {
    // ⏰ 惰性负载触发不透明度
    $("main").removeClass("loading");

    // ✨ 小介绍演示动画
    $({foo:0}).animate({foo:(Math.PI*3)}, {
      duration: 8000,
      easing: "swing",
      step: function(val) {
        if ( !interacted ) {
          document.querySelector("#app").style.setProperty(
                  "--ratio-x", (Math.cos(val) + 1.5) / 3
          );
          document.querySelector("#app").style.setProperty(
                  "--ratio-y", (Math.sin(val) + 2) / 4
          );
        }
      }
    });
  });
</script>
</html>