반응형
안녕!
이 빠른 튜토리얼에서는 이미지와 몇 줄의 CSS 코드를 사용하여 사용자 지정 커서를 만드는 방법을 보여 드리겠습니다.
스크린샷:
커서:
커스터마이즈된 커서 이미지가 하나 이상 필요합니다. 브라우저가 지원하는 형식의 이미지를 문자 그대로 사용할 수 있습니다. 예를 들어, 저는 SVG 형식을 사용해 왔습니다.
세 가지 이미지가 있어요
- default.svg
- 포인터.svg
- text.svg
이러한 상태는 다음 상태를 대체합니다.
- 체납
- 포인터.
- 본문
HTML 코드:
이 예에서는 사용자 지정 커서를 사용할 세 가지 위치를 선택했습니다.
- 본문:
- 제목:
- 단추:
HTML 코드에서 다음을 추가할 수 있습니다.
<body>
<h1>CSS Custom Cursor Demo<h1>
<button>Custom Button</button>
</body>NB: 태그 안에 있는 텍스트는 문자 그대로 무엇이든 될 수 있습니다.
CSS 코드:
CSS 코드는 모든 것이 실제로 일어나는 곳이다. 다음과 같이 각 요소에 대해 하나의 속성만 있으면 됩니다.
body {
cursor: url('default.svg'), auto;
}
h1 {
cursor: url('text.svg'), text;
}
button {
cursor: url('pointer.svg'), pointer;
}그게 다야! 아래에서 이 튜토리얼의 녹음된 데모를 확인하십시오.
'css' 카테고리의 다른 글
| NativeScript 시작하기 (0) | 2022.02.19 |
|---|---|
| 개발자로서 디자인에 대한 당신의 생각 (0) | 2022.02.19 |
| Target#5 CSS 전투 (0) | 2022.02.19 |
| 이 작은 SVG 트릭으로 다음 웹 애플리케이션을 과급하세요. (0) | 2022.02.19 |
| 14 코데펜이 당신을 날려버립니다! (0) | 2022.02.19 |
댓글