CSS Hover 애니메이션 - 3

CSS hover 애니메이션 - 3

아래와 같이 x 버튼에 마우스를 hover 했을때
close로 바뀌는 애니메이션을 css로 만들어 보자.

CLOSE

구현하기

먼저 html을 작성해 줍시다.

<div class="content">
    <div class="close">
        <div>CLOSE</div>
    </div>
</div>

저 검정(?)상자의 스타일을 지정해주자

.content {
    width: 150px;
    height: 150px;
    position: relative;
    box-sizing: border-box;
    background: #141926;
}

다음으로 x를 감싸주는 상자의 css를 지정해 봅시다.

.close {
    width: 80px;
    height: 50px;
    cursor: pointer;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

이제 x의 css도 지정해 봅시다. 

.close에 before, after를 만든후 rotate로 돌리면 된다
그냥 돌리면 돌렸을때 위치가 맞지 않기 때문에 각각 top, bottom 50%로 지정해준다.
그리고 transition에서 ease-in은 애니메이션 진행속도를 지정한 것이다.

.close::before,
.close::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: .3s ease-in;
}

.close::before {
    top: 50%;
    transform: rotate(45deg);
}

.close::after {
    bottom: 50%;
    transform: rotate(-45deg);
}

x hover시 위 샘플처럼 애니메이션 되게 해보자
그냥 hover시 top, bottom, rotate를 원상태로 돌려주면된다.

.close:hover::before{
    top: 0;
    transform: rotate(0deg);
}
.close:hover::after{
    bottom: 0;
    transform: rotate(0deg);
}

다음으로 텍스트의 css를 지정해 주자
opacity, 와 transition만 있으면 된다.
그 외에는 알아서 지정해 주면 된다.

.close div {
    font-size: 14px;
    color: white;
    text-align: center;
    line-height: 50px;
    opacity: 0;
    transition: .3s;
    color: white;
    text-decoration: none;
}

드디어 마지막이다.
hover시 텍스트가 애니메이션되게 css를 적어 보자.

.close:hover div {
    opacity: 1;
}

결과물

아래와 같이 애니메이션이되면 성공이다!

CLOSE

- 끝 -