마우스 모양 변경 및 클릭시 파동 효과

2024. 7. 10. 15:35·코드 정리/코드 정리 - Tistory
목차
  1. 마우스 모양
  2. 클릭시 파동 효과

마우스 모양


    
css
* {cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;}

 

클릭시 파동 효과

 


    
html
<script>
function clickEffect(e){
  var d=document.createElement("div");
  d.className="clickEffect";
  d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
  document.body.appendChild(d);
  d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
}
document.addEventListener('click',clickEffect);
</script>
HTML - </head> 위에 복사

    
css
/*마우스 클릭 효과*/
div.clickEffect{
position:fixed;
box-sizing:border-box;
border-style:solid;
border-color:#828282;
border-radius:50%;
animation:clickEffect 0.8s ease-out;
z-index:5;
}
@keyframes clickEffect{
0%{
opacity:1;
width:0.5em; height:0.5em;
margin:-0.25em;
border-width:0.3rem;
}
100%{
opacity:0.1;
width:15em; height:15em;
margin:-7.5em;
border-width:0.01rem;
}
}
css 에 붙여넣기

 

 

'코드 정리 > 코드 정리 - Tistory' 카테고리의 다른 글

날짜 형식  (0) 2024.07.11
자동 목차에 제목4(h4) 추가  (0) 2024.07.10
관리 사이드바  (0) 2024.07.05
코드 블럭 수정(mac 형태) + 복사  (0) 2024.07.05
티스토리 홈 + 로그인/로그아웃 버튼 만들기  (1) 2024.07.05
  1. 마우스 모양
  2. 클릭시 파동 효과
'코드 정리/코드 정리 - Tistory' 카테고리의 다른 글
  • 날짜 형식
  • 자동 목차에 제목4(h4) 추가
  • 관리 사이드바
  • 코드 블럭 수정(mac 형태) + 복사
분석가 황규진
분석가 황규진
공공기관 위험평가관련 부서에서 근무하고 있습니다.
HGJ's Insight공공기관 위험평가관련 부서에서 근무하고 있습니다.
글쓰기 관리
분석가 황규진
HGJ's Insight
홈
|
로그인
  • 전체 글 555
    • 개인 활동(일상) 3
      • 독서 2
      • 근황 공유 1
    • 개인 활동(공부) 44
      • Tableau Bootcamp 10
      • 직무 공부 22
      • 강의 12
    • 개인프로젝트 0
      • 신용카드 연체 평가 모델 0
    • 자격증 7
      • 빅데이터분석기사 1
      • 정보처리기사 1
      • 경영정보시각화 1
      • SQL개발자(SQLD) 1
      • 데이터 분석 준전문가(ADsP) 1
      • 통계적품질관리(SPC) 1
      • AICE Associate 1
    • 코드 정리 11
      • 코드 정리 - Tistory 8
      • 코드 정리 - Python 3
    • 코딩테스트연습 116
      • SQL_프로그래머스 116
    • 취업사관학교 9기 199
      • 모닝스쿨 54
      • 스스로 모닝스쿨 125
      • 직무 스터디 20
      • 반성과 다짐 0
    • 빅데이터 분석가 양성과정 174
      • Python 88
      • Python - 머신러닝 26
      • Python - 딥러닝 32
      • PyQt 4
      • JavaScript 10
      • MySQL 13
      • Node.js 1
hELLO· Designed By정상우.v4.6.1
분석가 황규진
마우스 모양 변경 및 클릭시 파동 효과
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.