[티스토리] 공감버튼 하트 콩닥콩닥 움직임 연출(css)

 

티스토리 글 하단에 있는 하트모양 공감버튼에 콩닥콩닥 뛰는 움직임을 주는 css 입니다.

 

적용 방법

 

스킨 편집 - html 편집 - CSS 로 이동한 다음 스크롤을 내려 

제일 하단에 아래 코드블럭 내용을 추가해 주시면 됩니다.

기존 코드를 손대지 않아도 되니 편하게 적용할 수 있어서 좋아요.

 

 

 

/* 하트 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%; 
	-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 ); }	{ transform: scale( 1 ); } 
	40% { transform: scale( .75); }
	60% { transform: scale( 1 ); }
	80% { transform: scale( .75 ); }
    100% { transform: scale( .75 ); }}

 

하트공감버튼CSS.txt

0.00MB

 

 

 

♥읽어주셔서 감사합니다♥
티스토리 댓글과 공감♥은 로그인이 필요 없습니다.
로그인하시면 구독 가능합니다.