css로 마우스 오버 시 테두리에 애니메이션 효과를 줘보자

---

자 html 구조도 다 짜뒀겠다

본격적으로 css를 시작해서 애니메이션 효과를 넣어봅시다!

 

css 가상 클래스와 애니메이션

 

---

1. 가상 클래스

 

애니메이션 이외의 필요한

다른 css 코드들은 설명하지 않고 넘어가겠습니다.

 

포스팅 아래에 코드팬을 남겨둘 테니

궁금하신 분들은 참고해주세요.

선 CSS 코딩 가상 클래스 사용

.line::before {
  content: "";
  position: absolute;
  background: rgba(230, 230, 230, 0.7);
  display: inline-block;
  transition: all 0.5s;
  left: 10%;
  top: 10%;
  width: 0%;
  height: 2px; }

① before

- before이라는 가상 태그를 클래스 이름이 line인 <div> 태그에 넣어줍니다.

- 말 그대로 가상으로 있는 태그로 html 코드에 없지만 태그가 있는 것처럼 사용할 수 있습니다.

- 이렇게 꾸며줄 때 주로 사용해요.

 

 

---

 

② css 하나씩 살펴보기

- content: "";  |  컨텐츠를 넣겠다는 코드입니다. 따옴표 안에 아무것도 없는 것은 빈 공간을 만들었다는 의미예요.

- position:absolute;  |  상위 태그인 <figcaption>에 position:relative;를 미리 설정해주는 것 잊지 말아 주세요.

- background: rgba...;  |  알파채널을 이용해 반투명한 배경색을 넣어줍니다.

- display: inline-block;  |  이건 제작하는 사이트에 따라 바뀌니 상황에 맞게 넣어주세요.

- transition: all 0.5s;  |  애니메이션의 속도를 결정해요. all이니까 모든 애니메이션을 0.5s 즉, 0.5초 동안 진행합니다.

 

 

---

 

선 위치 CSS 코딩 left, top, width, height

③ 시작점

- 이제 각각의 선 시작점을 잡아줍니다. 애니메이션이니까 전체가 아니라 시작점을 잡아주는 거예요.

- left: 10%;  |  왼쪽에서 10%만큼 떨어진 위치

- top: 10%;  |  마찬가지로 위쪽에서 10% 떨어진 위치. 이렇게 하면 가로세로 좌표가 나오죠?

- width: 0%;  |  애니메이션의 핵심. 시작 시에는 0% 가로사이즈여서 보이지 않는다.

- height: 2px;  |  선의 두께를 결정한다.

 

 

---

 

반응형

---

2. 마우스 오버 시 css 코드

마우스 오버시 css 코딩 width:80%;

① width

- 위에서 애니메이션의 핵심은 width라고 말씀드렸죠?

- 0%였던 수치를 마우스를 올리면 80%로 만들어줍니다.

 

---

 

figure:hover .line::before { width: 80%; }

② hover

- 이때 hover를 잘 써주셔야 하는데요.

- figure:hover 뒤에 한 칸을 띄고 원하는 선택자를 적으면 됩니다.

- 가상 선택자에 적었으니 before까지 적어주시는 것 잊지 말아 주세요.

 

 

---

 

나머지는 동일하게 적고

위치만 조정해주시면 됩니다.

 

어렵지 않죠?

---

3. 데모

 

 

① 전체 코드를 살펴보자

- 하지만 그렇게 말로만 끝내면 다른 부분이 어려울지도 모르잖아요?

- 그래서 코드팬을 이용해 데모를 만들어봤습니다.

- 코드를 참고해보세요 :)

 

 

http://ssimplay.com/

SSIMPLAY

 

실제 사이트를 보고 싶으시다면

포트폴리오 사이트를 구경해주세요.

 

 

---

 

---

 

contact

 

:: www.instagram.com/draw_wool/

:: www.pinterest.co.kr/draw_wool/_created/

:: notefolio.net/draw_wool

:: www.behance.net/draw_wool

:: grafolio.naver.com/draw_wool

 

 

 

---

 

 

[같이 보면 좋은 글]

[coding/html + css] - 마우스를 올리면 그려지는 테두리 애니메이션 구조를 살펴보자(html)

마우스를 올리면 그려지는 테두리 애니메이션 구조를 살펴보자(html)

 

[coding/html + css] - css와 scss에서 마우스 클릭 가상 클래스 선택자를 알아보자

css와 scss에서 마우스 클릭 가상 클래스 선택자를 알아보자

---

그럼 이만.

총총.