✨ 인터랙티브 네온 커서 트레일 효과 ✨ 코드
- DDD원래의
- 2024-12-05 06:46:101047검색
인스타그램에서 팔로우하세요: https://www.instagram.com/webstreet_code/
암호
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>코더의 네온 커서</title>
<스타일>
* {
여백: 0;
패딩: 0;
상자 크기 조정: 테두리 상자;
}
몸 {
높이: 100vh;
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
배경: #0d1117; /* 코딩 분위기를 위한 어두운 배경 */
색상: 흰색;
글꼴 계열: 'Courier New', 고정 폭; /* 코더의 느낌을 위한 고정 폭 글꼴 */
오버플로: 숨김;
커서: 없음; /* 기본 커서 숨기기 */
전환: 배경 0.5초 용이성;
}
/* 사용자 정의 커서 스타일 */
.cursor {
위치: 절대;
너비: 20px;
높이: 20px;
테두리 반경: 50%;
배경색: #ffffff;
상자 그림자: 0 0 10px rgba(255, 255, 255, 0.8); /* 네온 글로우 효과 */
포인터 이벤트: 없음;
변환: 변환(-50%, -50%);
전환: 모두 0.1초 용이성;
}
/* 커서 뒤의 네온 트레일 */
.neon-트레일 {
위치: 절대;
너비: 5px;
높이: 5px;
테두리 반경: 50%;
포인터 이벤트: 없음;
변형원점: 중심;
애니메이션: trailEffect 1.5초 이지아웃 앞으로;
}
/* 트레일 확장 애니메이션 */
@keyframes trailEffect {
0% {
변환: scale(1);
불투명도: 1;
}
100% {
변환: scale(10);
불투명도: 0;
}
}
/* 페이지의 밝은 테두리 효과 */
.페이지 테두리 {
위치: 절대;
상단: 0;
왼쪽: 0;
오른쪽: 0;
하단: 0;
테두리: 2px 솔리드 #ffffff;
포인터 이벤트: 없음;
상자 그림자: 0 0 15px rgba(255, 255, 255, 0.7);
}
</스타일>
</머리>
<본문>
<!-- 페이지 주위의 맞춤 테두리 -->
<div>
위 내용은 ✨ 인터랙티브 네온 커서 트레일 효과 ✨ 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
html for pointer default display position overflow margin padding border viewport background transform transition animation flex https Translate
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.