All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Moving Indicator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div id="marker"></div>
</div>
<script>
let marker = document.querySelector('#marker');
let item = document.querySelectorAll('.box');
function indicator(e){
marker.style.left = e.offsetLeft+'px';
marker.style.top = e.offsetTop+'px';
}
item.forEach(link => {
link.addEventListener('mousemove', (e) => {
indicator(e.target)
})
})
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
.container
{
position: relative;
max-width: 700px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.container .box
{
position: relative;
width: 200px;
height: 200px;
background: #333;
-webkit-mask: radial-gradient(circle 50px at top left, transparent 98%, #000) top left,
radial-gradient(circle 50px at top right, transparent 98%, #000) top right,
radial-gradient(circle 50px at bottom left, transparent 98%, #000) bottom left,
radial-gradient(circle 50px at bottom right, transparent 98%, #000) bottom right;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
}
#marker
{
position: absolute;
pointer-events: none;
background: #bcff6e;
width: 200px;
height: 200px;
transition: 0.5s;
-webkit-mask: radial-gradient(circle 50px at top left, transparent 98%, #000) top left,
radial-gradient(circle 50px at top right, transparent 98%, #000) top right,
radial-gradient(circle 50px at bottom left, transparent 98%, #000) bottom left,
radial-gradient(circle 50px at bottom right, transparent 98%, #000) bottom right;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
}
