CSS
mouse move
by 영감은어디에
2024. 10. 17.
.box span {position: absolute; display: block; width: 0; height: 0;border-radius: 50%;background: #fff;
transition: 0.1s;transform: translate (-50%, -50%);
mix-blend-mode: difference;}
.box:hover span {width: 300px;height: 300px;}
document.querySelectorAll('.box').forEach(function (box) {
box.addEventListener('mousemove', function(e){
let x = e.pageX - box.offsetLeft; let y = e.pageY - box.offsetTop;
document.querySelectorAll('span').forEach(function(span){
span.style.left = x + 'px';
span.style.top = y + 'px';
})
})
})