웹 사이트에 대한 사용자 지정 커서 만들기
이 빠른 자습서에서는 이미지와 몇 줄의 CSS 코드로 사용자 지정 커서를 만드는 방법을 보여 드리겠습니다.
스크린샷:
커서:
최소한 하나의 사용자 정의 커서 이미지가 필요합니다. 말 그대로 브라우저가 지원하는 형식의 모든 이미지를 사용할 수 있습니다. 예를 들어 SVG 형식을 사용했습니다.
세 개의 이미지가 있습니다.
이들은 다음 상태를 대체합니다.
HTML 코드:
이 예에서는 사용자 지정 커서를 사용할 세 곳을 선택했습니다.
HTML 코드에서 다음을 추가할 수 있습니다.
<body>
<h1>CSS Custom Cursor Demo<h1>
<button>Custom Button</button>
</body>
주의: 태그 안의 텍스트는 말 그대로 무엇이든 될 수 있습니다.
CSS 코드:
CSS 코드는 모든 일이 실제로 일어나는 곳입니다. 다음과 같이 각 요소에 대해 하나의 속성만 필요합니다.
body {
cursor: url('default.svg'), auto;
}
h1 {
cursor: url('text.svg'), text;
}
button {
cursor: url('pointer.svg'), pointer;
}
그리고 그게 다야! 아래에서 이 튜토리얼의 녹화된 데모를 확인하세요.
Reference
이 문제에 관하여(웹 사이트에 대한 사용자 지정 커서 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rolandixor/creating-custom-cursors-for-your-website-28ba텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
