鼠标灯光追踪
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
源代码：
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>灯光追踪</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:700");*{box-sizing:border-box}body{font-family:Montserrat,sans-serif;min-height:100vh;margin:0;padding:0;background-color:rgb(9,14,23);color:#ffffff}svg{opacity:0;position:absolute}.wrapper{position:relative}.hero{min-height:100vh;padding:clamp(1rem,2vw,5rem);display:flex;align-items:center}.hero--secondary{--mask:radial-gradient(circle at var(--x,70%) var(--y,50%),black 25%,transparent 0);position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#482EF4,#5FF4C2,#ffffff);color:rgb(9,14,23);-webkit-mask-image:var(--mask);mask-image:var(--mask)}.hero__heading{font-size:clamp(2rem,5vw,8rem);text-transform:uppercase;margin:0;max-width:fit-content;margin-left:auto;margin-right:auto} </style> </head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script> <div class="wrapper"> <div class="hero"> <h1 class="hero__heading">Have a nice day!</h1> </div>
<div class="hero hero--secondary" aria-hidden="true" data-hero> <p class="hero__heading">It will be sunny</p> </div> </div> </body> <script> const hero = document.querySelector('[data-hero]')
window.addEventListener('mousemove', (e) => { const { clientX, clientY } = e const x = Math.round((clientX / window.innerWidth) * 100) const y = Math.round((clientY / window.innerHeight) * 100)
gsap.to(hero, { '--x': `${x}%`, '--y': `${y}%`, duration: 0.3, ease: 'sine.out', }) }) </script> </html> |
