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

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

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

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

티스토리 스킨편집

그러면 HTML, 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 에 대해서 알아 보았습니다. 이런 효과를 원하신다면 적용해 보세요. 그냥 복사해서 붙여 넣기만 하시면 간단하게 적용을 할수가 있어요 ^^ 

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