티스토리 공감 하트 움직이게 하는 방법

IT,PC,모바일,스마트폰 정보와 팁 그리고 제품리뷰와 생활정보

티스토리 공감 하트 움직이게 하는 방법

티스토리 공감 하트 움직이게 하는 방법

이번 포스팅은 티스토리를 이용하시는 분들에게 유용한(??) 간단한 CSS 팁인데요. 제 블로그에 보시면 공감 하트 버튼이 콩닥콩닥 움직이는걸 볼수가 있습니다. 뭐 그렇게 큰 의미가 있는건 아니지만 그냥 가만히 있는 하트 보다는 조금더 눈에 띄지 않나요? 어쨌든 이번 포스팅에서는 제 블로그에 있는것처럼 저 하트를 콩닥 콩닥 움직이게 하는 방법에 대해서 알아 보려고 합니다 .

다들 아시겠지만 이건 간단하게 CSS 몇줄만 추가를 하면 되는 아주 간단한 팁입니다. 혹시 하트를 움직이게 하고싶으신 분들은 참고 하셔서 CSS 를 추가해서 사용하시면 좋을거 같네요 ^^

일단 다들 아시는것처럼 CSS 를 추가 하기 위해서는 [꾸미기]-[스킨 편집] 메뉴를 클릭을 하셔서 수정을 하셔야 합니다. 그리고 아래와 같이 "html 편집" 을 클릭을 해주시면 됩니다. 다들 아시는 내용 ^^

티스토리 스킨편집
티스토리 스킨편집

그러면 HTML, CSS, 파일업로드 탭이 나오는데요. 저희는 CSS 를 수정을 할거라서 CSS 탭을 눌러 주시면 됩니다. 그리고 제일 아래로 스크롤을 내려 주세요~ 그냥 제일 아래쪽에 추가를 하면 되는거라서 제일 아래로 이동을 해주시면 됩니다. 

티스토리 CSS 편집
티스토리 CSS 편집

그리고 나서 아래의 내용을 추가를 해주시면 됩니다. 뭐 그리 어려운 내용은 없습니다. 그냥 ico_like 크기를 콩닥콩닥 하게 조정을 하는건데요. 내용은 구글링 하면 많이 나오니까 참고 하셔도 될거 같습니다. 

/* 하트 CSS 추가 */ .ico_like { position: relative; animation: ico_like 1s infinite; margin:0 auto } .ico_like:before, .ico_like:after { position: absolute; content: ""; top: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .ico_like:after { left: 0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } @keyframes ico_like { 0% { transform: scale( .75 ); } 20% { transform: scale( 1 ); } 40% { transform: scale( .75 ); } 60% { transform: scale( 1 ); } 80% { transform: scale( .75 ); } 100% { transform: scale( .75 ); } }

이렇게 추가를 하게 되면 실제로 제 블로그에 있는 하트 구독 버튼처럼 콩닥콩닥 효과를 볼수가 있습니다. 어때요? 간단하죠? 티스토리는 커스텀 하게 스킨을 자유롭게 변경할수 있는 점은 정말 괜찮은거 같아요. 네이버 블로그에서는 할수 없는 부분이죠. 가끔씩 문제가 있기는 하지만 이래서 개인적으로 티스토리를 좋아 합니다. ^^;;; 

콩닥콩닥 움직이는 하트 공감
콩닥콩닥 움직이는 하트 공감

이상으로 간단하게 알아본 티스토리 구독 하트 버튼을 콩닥콩닥 움직이게 하는 CSS 에 대해서 알아 보았습니다. 이런 효과를 원하신다면 적용해 보세요. 그냥 복사해서 붙여 넣기만 하시면 간단하게 적용을 할수가 있어요 ^^ 

그럼 티스토리를 사용하시는 분들에게 도움이 되셨길 바라면서 이만 포스팅을 마치도록 하겠습니다 .조금이나마 도움이 되셨다면 하단에 있는 구독 & 공감 & 댓글 많이 많이 부탁 드려요~ 

14
현뀨쮸쀼쮸 2020.11.30 23:53 신고

유용하네요! 잘보고가요~

KEBI heokebi 2020.12.01 13:49 신고

댓글 감사합니다. ^^

1인지식기업인 2020.12.01 07:59 신고

포스팅 잘 보고 가요 감사합니다

KEBI heokebi 2020.12.01 13:50 신고

댓글 감사합니다. ^^

땡꿍쏘울 2020.12.01 09:34 신고

아~ 다른분들 움직이는것 보고 신기하다 생각했는데^^ 저도 한번 해봐야겠어요!!

KEBI heokebi 2020.12.01 13:50 신고

간단한거니 해보세요 ^^

teum♡ 2020.12.01 14:07 신고

헐 ㅋㅋㅋㅋ너무 귀여워요 ㅜㅜㅜㅜㅜ 저도 해야겠어요 ㅎㅎㅎㅎ

KEBI heokebi 2020.12.01 16:22 신고

적용해 보세요.. 소소한 꾸밈이 될거에요 ^^

★☆△○☆★ 2020.12.01 16:21 신고

조은 정보 감사합니다~^^

KEBI heokebi 2020.12.01 16:22 신고

댓글 감사합니다. ^^

H_A_N_S 2020.12.01 21:27 신고

앱에서는 안 움직이고 피씨 화면에서만 움직이는 건가요? 앱에서는 안 움직여요ㅎ

KEBI heokebi 2020.12.01 21:33 신고

네~ 앱에 보이는 부분은 CSS 와는 무관한 앱 자체 기능이라서 적용이 안됩니다. ^^

아이홀 2020.12.03 09:36 신고

콩닥콩닥 뛰는 하트 너무 이쁜데요.
덕분에 잘 적용하였습니다.
(코드 복사가 안되어 열심히 타이핑 한건 안비밀;;)

2021.02.08 00:40

비밀댓글입니다

Comment *

댓글 달기

7,865,120

전체

2,970

오늘

5,098

어제

Skin By KEBIBLOG Ver 1.0 Copyright ⓒ KEBI BLOG. All rights reserved.