-
CSS / 따라다니는 마우스 포인터 커스텀하기Web dev/HTML&CSS 2023. 4. 23. 22:15728x90반응형
포트폴리오 인트로 페이지를 우주느낌으로 하였다.
그리고 커서포인터를 빛으로 표현해보았다.
<div id="cursor-custom"></div>
#cursor-custom { height: 30px; width: 30px; pointer-events: none; position: fixed; background: #fff; border-radius: 50%; transform: translate(-10%,-10%); box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff, 0 0 150px #fff; z-index: 10; cursor: none; } @media (max-width:1024px) { #cursor-custom{display: none;} }
const cursor = document.getElementById("cursor-custom"), radius = cursor.offsetHeight / 2; document.addEventListener("mousemove", (e) => { let top = e.clientY - radius, left = e.clientX - radius; cursor.style = `top: ${top}px; left: ${left}px`; });
728x90반응형'Web dev > HTML&CSS' 카테고리의 다른 글
CSS / typeit 라이브러리로 html 타이핑 효과 주기 (0) 2023.04.23 CSS / Scollbar custom 스크롤바 커스텀하기 (0) 2022.10.30 CSS / placeholder 색상바꾸기 (0) 2022.03.13 CSS / 텍스트 줄임 ...처리 (0) 2022.03.13