<style>
body {
background: url(https://images.unsplash.com/photo-1519677100203-a0e668c92439)
no-repeat center;
background-size: cover;
height: 100vh;
cursor: none;
padding: 0%;
margin: 0%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font-family: "Roboto", Arial, sans-serif;
font-size: calc(20px + 2vw);
font-weight: 700;
color: #fafafa;
text-shadow: 2px 2px 2px #000;
pointer-events: none;
user-select: none;
white-space: nowrap;
}
.spotlight {
position: absolute;
height: 100%;
width: 100%;
background-image: radial-gradient(circle,transparent 160px,rgba(0, 0, 0, 0.85) 200px);
/* background-image: radial-gradient(circle,red , 160px,rgba(0, 0, 0, 0.85) 200px);
1、transparent是透明色，颜色后面跟着px，颜色后面跟着px
2、把transparent色改成red或者其他颜色就可以改变内圈的颜色
*/
}
</style>
</head>
<body>
<h1>solo@reactiv3.com</h1>
<div class="spotlight"></div>
<script>
window.addEventListener("DOMContentLoaded", () => {
const spotlight = document.querySelector('.spotlight');
let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
window.addEventListener('mousemove', e => updateSpotlight(e));
window.addEventListener('mousedown', e => {
spotlightSize = 'transparent 130px, rgba(0, 0, 0, 0.95) 150px)';
updateSpotlight(e);
});
window.addEventListener('mouseup', e => {
spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
updateSpotlight(e);
});
function updateSpotlight(e) {
spotlight.style.backgroundImage =
`radial-gradient(circle at ${e.pageX / window.innerWidth * 100}%
${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
}
});
</script>
</body>
扫一扫
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
