[CSS] 움직이는 고양이 만들기

나만없어 고양이..

 

안녕하세요. 꾸생입니다.

 

요즘 티스토리 스킨을 다시 만들고 있는데요. 인파님의 티스토리 스킨을 보며 분발하고 있습니다. 인파님처럼 화려하게 꾸미지는 못하지만 꾸안꾸 느낌으로 소소하게 재밌는 디자인을 넣고 있는데요.

 

비교적 간단하게 귀여운 고양이를 만들어보려 합니다. 사실 검색으로 들어오셨다면 본인이 찾던 그 고양이가 아닐 수 있습니다.

 

아무튼 제가 자주 애용하는 Boxicons라는 오픈소스 아이콘 라이브러리가 있습니다. CDN이나 npm 라이브러리 설치로 간단하게 사용할 수 있는데요. 대략 1000개 이상의 아이콘들이 준비되어 있어 원하는 아이콘을 검색해 사용하실 수 있습니다.

 

아래 링크로 접속해 확인해보세요.

 

Boxicons : Premium web friendly icons for free

 

BoxIcon

 

 

아이콘들 둘러보던 와중 고양이 한 마리가 눈에 띄었는데요. 만들고 있던 스킨에 바로 적용하기로 마음먹었습니다. 

 

 

CSS 고양이

 

게시판 썸네일 상단에 마우스 오버 시 고양이가 등장해 움직이는 애니메이션입니다. 제 경우 게시글 썸네일 상단에 나타나도록 구현했습니다. 아래 간단한 HTML/CSS 코드를 남겨놓겠습니다.

 

BoxIcon 사용

---

npm install boxicons --save

 <script src="https://unpkg.com/boxicons@2.1.2/dist/boxicons.js"></script>

 

HTML 코드

---

<article class="post-item">
	<i class="bx bxs-cat bx-lg"></i>
        <a class="post-link" href="">
            <div class="post-thumb-wrap">
                <img class="post-thumb" src="" alt="Post Thumbnail">
                <div class="post-bottom-wrap">
                    <h2 class="post-article-title"></h2>
                    <p class="post-summary"></p>
                    <p class="post-date">
                         -&nbsp; 
                        <span class="post-commentCnt"></span>
                    </p>
                </div>
            </div>
        </a>
</article>

 

티스토리 스킨 전용 코드가 섞여있어 다른 곳에 사용하려면 주의해야합니다.

 

 

CSS 코드

---

.post-item{ 
    position: relative;
    max-width: 544px; 
    width: 100%;
    margin-bottom: 60px;
}
.post-thumb-wrap { 
    position: relative;
    width: 100%; height: 327px;
    border-radius: 3px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    overflow: hidden;
}
.post-thumb {
    display: inline-block;
    width: 100%; height: 100%;
}
.post-article-title {
    font-size: 22px;
    font-weight: bold;
    margin: 25px 0 10px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.post-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
}
.post-date {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
}

/* 움직이는 고양이 만들기 */

.bxs-cat {
    position: absolute;
    top: -43px; left: 0px;
    opacity: 0;
    transition: 0.3s ease;
    animation: catWorking 6.6s ease infinite;
}
.post-item:hover > .bxs-cat { opacity: 1; }

@keyframes catWorking {
    0% { 
        left: 0; 
        transform: scaleX(1); 
    }
    40% { 
        transform: scaleX(1); 
    }
    50% { 
        left: calc(100% - 50px); 
        transform: scaleX(-1);
    }
    90% { 
        transform: scaleX(-1);
    }
    100% { 
        left: 0;  
        transform: scaleX(1);
    }
}

 

고양이의 자연스러운 방향 회전을 위해 @keyframes  40%와 90%에 transform scaleX를 1에서 -1로 바꿔주면 좌우 반전이 되므로 뒤로 갈 수 있도록 표현할 수 있습니다.