CSS transition을 활용한 외곽선 그리기

CSS transition 속성이란?

transition 속상이란 CSS 속성을 변경할 때 애니메이션 속도를 지정해주는 태그입니다.

transition으로 다양한 효과를 구현할 수 있는데요, 오늘은 transition을 활용하여 마우스 오버시 외곽선이 그려지는 효과를 구현해보겠습니다.

STEP.01

가장 먼저 html 구조부터 만들어볼까요?

부모 태그인 a안에 transition효과를 적용해 외곽선을 그릴 태그인 span을 넣어줍니다.

   <a class="outline">
        VIEW
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </a>

각각의 span 태그가 상 하 좌 우 외곽선이 됩니다.

STEP.02

다음으로는 CSS를 적용할 단계입니다.

먼저 부모태그인 a의 스타일을 지정해줍니다. (가로, 세로, 마진값 등)

그리고 마우스 오버시 부모의 배경을 제거하고 외곽선만 보이게 하기 위해서 

.outline:hover{background:none; color:#23262;} > 추가해주세요!

  .outline{display:block; position:relative; width:150px; height:48px;
    text-align:center; line-height:48px; transition: all 0.2s; color:#fff;
    background:#23262b;}

STEP.03

다음으로는 자식요소인 span 태그에 'positon:absolute' 속성을 부여하여 부모태그의 상 하 좌우에 각각 배치할 차례입니다.

첫번째와 세번째 span에는 widht:0; height:1px; / 두번째와 네번째 span에는 width:1px; height:0 으로 스타일을 적용합니다.

STEP.04

위와 같이 span에 스타일을 주었다면 이번엔 transiton 속성만 부여하면 외곽선을 그리는 효과는 끝입니다.

.outline span 에 {transition:all 0.6s;} 을 추가해주세요! 값은 원하는 만큼!!!

자, 그럼 이제 결과를 확인해볼까요?

추가적으로 여기에 transition-delay 속상을 상 > 우 > 하 > 좌 순으로 순차적으로 값을 다르게 적용해주면

펜을 떼지않고 네모를 그리는 듯한 효과를 줄 수 있습니다.

참고사이트

https://juyeol.tistory.com/1

11111111