728x90
반응형
구글링을 자주 하다보니 너무 예쁜 티스토리가 많았다.
나도 저거 한번 해봐야지 라는 생각이 든 페이지도 있었고, 이걸 도대체 어떻게 한건데..! 라는 생각이 들 때도 있었다. 특히 검색하는 내용 대부분이 코딩관련된 사람들이 많아 특색있게 css를 적용한 사례들이 너무나도 많았다.
나같은 백엔드 코린이 나부랭이는 하나씩 조그만거 하나씩 바꿔나가야겠다.
나는 두근거리는 하트를 만들고 싶었다.
여기저기서 구글링을 해 오픈소스를 1가지 발견했다. 하지만 얌체처럼 드래그가 불가능했다. 손으로 한글자한글자 타자로 써 내려가면서 나는 꼭 이러지 말아야지.. 라고 생각했다.
적용코드
참고로 코드 갖다 쓰실거면 페이지 최하단의 공감 누르십쇼
/* * 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);
}
}
적용방법
1) 본인의 티스토리 블로그 관리에 들어간다.
(ULR : 본인의 티스토리블로그주소/manage)
2) 좌측의 [스킨편집]메뉴에 진입한다.
3) [html 편집]으로 이동한다.
4) [CSS] 칸으로 넘어간다.
5) 본 포스팅 상단의 [적용코드]를 붙혀넣기 해준다.
다만, @charset "UTF-8" 블럭이 끝난 이후에 넣어주어야한다.
대충 넉넉히 나는 font 설정 뒤에 넣어주었다.
완성된 하트
반응형