先看效果
再看代码:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>灯光效果title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&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">Illuminatetext>
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>