Custom Cursor Using HTML CSS & JS
Download : Code
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Custom Cursor</title>
</head>
<body>
<div class="cursor">
</div>
<script type="text/javascript">
const cursor=document.querySelector(".cursor");
document.addEventListener("mousemove",e=>{
cursor.setAttribute("style","top:"+e.pageY +"px;left:"+e.pageX +"px;")
});
document.addEventListener("click",()=>{
cursor.classList.add("new");
setTimeout(()=>{
cursor.classList.remove("new");
},500)
})
</script>
</body>
</html>style.css
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
height: 100vh;
background: black;
cursor: none;
}
.cursor{
position: absolute;
width: 10px;
height: 10px;
border: 4px solid rgba(255, 255, 255,0.623);
border-radius: 50%;
}
.cursor::before{
content: '';
position: absolute;
top: -1px;
left: -1px;
width: 10px;
height: 10px;
border: 1px solid rgba(255, 255, 255, 0.301);
border-radius: 50%;
animation: animl 0.5s linear infinite;
}
@keyframes animl {
0%,100%{
transform: scale(1);
}
50%{
transform: scale(3);
}
}
.new{
animation: anim 0.5s forwards;
border: 4px solid rgba(255, 0, 0, 0.692);
}
@keyframes anim {
0%,100%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
}
Download - Code
No comments:
Post a Comment