[티스토리] 블로그 마우스 클릭 시 원형 파형/파동 효과
티스토리 블로그를 꾸미면 나름 재밌는 마우스 효과 한 가지를 소개해드리겠습니다.
블로그 내에서 좌클릭을 할 경우 원형 파동이 나타나면서 사라지는 효과입니다.
아래 움짤처럼 표시됩니다.
마이스 클릭 효과 출처는 아래 링크에 참고하시면 됩니다.
https://fdossena.com/?p=html5cool/clickfx/i.frag
2021.12.22 - [애드센스] - [애드센스] 티스토리 사이드바 광고 추가/적용/삽입하기
반응형
2021.03.24 - [블로그] - [티스토리] 블로그 파비콘(Favicon) 만들기
1. 블로그 관리 홈 -> 꾸미기 -> 스킨 편집
2. html 편집
3. HTML와 CSS 소스 코드 추가하기
- <head>와 </head> 사이에 아무 곳에 소스 코드를 넣어주시면 됩니다.
- CSS는 자신이 원하는 곳에 소스 코드를 넣어주시면 됩니다.
※ 추가 설명
CSS 코드에서 파동/파형의 속도 조절은
animation:clickEffect 0.8s ease-out;
코드에서 0.8 보다 작으면 빠르게 높으면 느리게 바뀝니다.
또한 CSS 코드에서 색상 변경은
border-color:#7BD5EE;
색상 코드에 다른 색상 코드를 넣어주시면 변경이 가능합니다.
코드는 변경 후 꼭 새로고침 하고 확인하셔야 됩니다.
저에게도 소중한 시간을 내서 작성한 포스팅입니다.
조금이라도 정보가 도움이 되셨다면 공감 부탁드립니다.
공감은 포스팅에 큰 힘이 됩니다.
반응형
'블로그' 카테고리의 다른 글
[티스토리] 블로그 오디세이(Odyssey) 스킨 줄 간격 조절하는 방법 - Tistory (0) | 2022.11.06 |
---|---|
[네이버 서치어드바이저] 소유확인 만료일을 점검해주세요 (만요일 갱신/연장하기) (0) | 2022.10.16 |
[티스토리] 블로그에 유튜브 동영상 올리는 2가지 방법 - Tistory (0) | 2022.09.09 |
[블로그] 티스토리 네이버 서치어바이저 소유확인 연장/진행 해결하기 (0) | 2022.07.11 |
[티스토리] 블로그의 방문자(이탈/클릭) 시각적 데이터 분석 - 핫자르(Hotjar) (0) | 2021.12.16 |
[블로그] '새로운 모바일 사용 편의성 문제가 발견됨' 오류를 해결해보자 - 구글 서치 콘솔 (0) | 2021.11.03 |
[애드센스] 광고 크롤러 오류가 있으며, 이 때문에 수익 손실이 발생할 수 있습니다. - 해결하기 (0) | 2021.10.13 |
[블로그] 티스토리 'itemlistelement’ 입력란이 누락되었습니다' 원인과 해결 방법 (0) | 2021.09.13 |