CSS를 사용하여 사용자 정의 커서를 만들시겠습니까?

CSS(Cascading Style Sheet)는 멋진 디자인을 만들 수 있는 기회를 제공합니다.SVG부터 애니메이션, 그리고 박스 모형의 개념까지 CSS는 연기를 마음껏 상상하게 하는 것이 유일한 장애물이다.
그 중 가장 좋은 디자인은 사용자 정의 커서를 만드는 것이다.
포인터에서 도움말까지 다양한 유형의 커서가 있습니다.이것codepen은 사용할 수 있는 다양한 유형의 커서를 보여 줍니다.
사용자 정의 커서를 만드는 것은 매우 간단합니다. SVG를 사용하는 간단한 방법을 보여 드리겠습니다. 그리고 여기서부터 시작하겠습니다.

SVG 이미지를 사용하여 사용자 정의 커서 만들기

바디 라벨만 포함된 간단한 html 페이지를 만듭니다.

스타일시트를 만듭니다. 바디 라벨에 빨간색 배경색만 표시하면 됩니다.

멋진 SVG를 가져와 CSS에 연결합니다.작업을 하려면 두 번째 값인 auto를 전달해야 합니다.그림을 사용할 수 없으면 기본 커서가 됩니다.

body {
background:red;
cursor:url('cursor.svg'),auto;
}

해봐.나는 성공했으면 좋겠다.
이거 대박이다.하지만 우리는 더 멀리 가고 싶다.우리는 당신이 클릭할 때 이것이나 저것 등을 할 수 있도록 멋진 애니메이션을 추가하고 싶습니다.
svg를 사용하면 사실상 이 정도는 할 수 있지만, 이것은 통제력을 잃을 수도 있다.따라서 다른 유형의 커서를 만듭니다.

요소를 사용하여 사용자 정의 커서 만들기
이제 저희가 했던 모든 걸 다 처리해 보도록 하겠습니다.

그리고 커서 클래스로 간단한div를 만듭니다.

이div의 스타일을 디자인할 수 있습니다. 이div의 스타일을 디자인해서 삼각형, 정사각형 등으로 만들 수 있습니다. 저는 원을 그리고 몸에 다른 스타일을 그릴 것입니다.

body {
margin: 0;
padding: 0;
height: 100vh;
background:black;
} 
.cursor {
width:20px
height:20px
border:2px solid white;
border-radius:50%;
}

다음에 할 일은 우리의div에 바디 라벨에 대한 위치를 주는 것이다.위치: 절대;아주 좋아요.나는 포지셔닝에 대해 깊이 토론하지 않을 것이다. 단지 이것은div를 아버지 표지의 왼쪽 상단에 놓을 뿐이다. 이 예에서 그것은 바디 표지이다

.cursor {
//other styles
position:absolute;
}

이제 기능성 커서가 되기 위해 몇 개의 스크립트를 추가합니다

스크립트 파일을 만들고 html에 연결하여 커서 표시를 가져오고 전체 본문에mousemove의 이벤트 리스트를 추가합니다

let cursor =document.querySelector(".cursor")
document.addEventListener("mousemove",function(e){
console.log(e)
})

mousemove는 기본적으로 화면에 멈출 때 마우스의 위치를 가리킨다.그것은 많은 속성을 포함하는 대상을 되돌려줍니다.하지만 페이지X와 페이지Y가 필요합니다.이 두 값은 기본적으로 브라우저 창의 왼쪽과 맨 위에 커서가 있는 위치입니다. 이것은div 요소의 위치를 변경하는 데 사용할 값입니다

// MouseEvent {isTrusted: true, screenX: 470, screenY: 219, clientX: 470, clientY: 148, …}
document.addEventListener("mousemove",function(e){
cursor.setAttribute("style",
`top: ${e.pageY}px;left:${e.pageX}px`
)
})

이제 기본 커서와 함께 이동하는 커서가 있어야 합니다.좋아.이 값을 다른 방식으로 변경할 수 있습니다. JS와 커서로 각각 변경할 수 있습니다.풍격왼쪽 키와 커서.풍격꼭대기그래도 돼.
속담에 이르기를 한 가지 일을 하는 데는 천 가지 방법이 있다.

그런데 작은 문제가 하나 있는데div는 실제로 커서가 있는 위치에 있지 않고 약간의 차이가 있다.position absolute로 요소를 페이지 중심에 배치하려고 시도할 때도 마찬가지입니다.그것은 항상 약간 일치하지 않는다. 이것은 전체 원소를 중심으로 가져왔기 때문에, 이것은 옳지 않은 것이다.원소의 반은 반드시 한쪽에 있고, 다른 반은 다른 한쪽에 있어야 한다.그래서 이런 상황에서 당신이 해야 할 일은 매번 페이지X와 PageY로 그것을 포지셔닝하고 이 두 값에서 이 요소의 너비와 높이의 절반을 빼는 것이다. 즉,

document.addEventListener("mousemove",function(e){
cursor.setAttribute("style",
`top: ${e.pageY-10}px;left:${e.pageX-10}px`
)
})

사용자 정의 커서의 또 다른 문제는 아무것도 클릭할 수 없다는 것이다.사실 이것은 통하지 않는다.단추, 닻 표시 등: (. 고맙습니다. 해결 방안이 있습니다. 커서 종류에 이것만 추가하면 됩니다.

pointer-events:none;

너는 가도 된다.그것을 더욱 훌륭하게 하기 위해서 너는 사용할 수 있다

cursor:none;

너의 몸 꼬리표에
이제 너는 완전히 여기에 멈출 수 있다. 이것은 매우 멋있다.나는 그것에 멋진 애니메이션을 추가하고 싶다.그럼 이제 이렇게 할게요.
따라서 클릭할 때마다 효과를 추가합니다.따라서 내가 문서의 어떤 내용을 클릭할 때마다, 문서는 약 0.5초 동안 팽창하고 사라진다.
이를 위해 CSS를 먼저 사용합니다.애니메이션이 있는 클래스 확장

.expand {
animation: cursorAnim 0.5s forwards;
border: 1px solid red;
}
@keyframes cursorAnim {
0% {transform: scale(1) }
50% { transform: scale(3) }
100% { transform: scale(1); opacity: 0 }
}

이것은 기본적으로 단도직입적이다. expand는 애니메이션 속성이 있는데, 50%일 때, 이것은 3배의 값으로 축소되고, 100%일 때 사라진다.
현재, 문서나 어디를 클릭할 때마다 expand 클래스를 추가한 다음, 5.5s 후에 삭제해야 합니다.

document.addEventListener("click", function () {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500);
});

이것이 바로 사용자 정의 마우스를 만드는 방식입니다.
나는 네가 그것을 즐겨 읽기를 바란다.
본문에서 나는 다음과 같이 언급했다.

사용자 정의 커서를 만드는 방법 (auto의 두 번째 값을 추가하는 것을 잊지 마세요)

div 요소를 사용하여 사용자 정의 커서를 만드는 방법(위치: 절대와 포인터 이벤트: 없음 잊지 마세요)

및 사용자 정의div 커서에 애니메이션을 추가하는 방법