테두리 애니메이션 효과 주기

↓border의 시계방향으로 빛나는 애니메이션이 있으면 좋겠다라는 요청이 있었다.

처음에는 단순하게 'border에 애니메이션을 주면 되지 않나?'라고 생각했는데 큰 착각이었다..! 

 

결론만 말하자면, 그라데이션 또는 애니메이션 효과를 준 큰 박스를 뒤에 깔고 넘치는 부분을 가리는 것이다. 

(항상 회사에서 참고했던 레퍼런스는 노션에 정리해두는데 정신이 없었나 안적었다 ㅜ)

 

보통 더 큰 box를 만들거나 :after, :before 요소에 적용시키는 것 같았는데, 나는 :after 속성에 적용시키는 방법을 선택했다. 

 

 

[ 가상 요소 ]

• 내용의 일부만 선택해 스타일을 적용할 때 사용한다.
• 가상 클래스와 구분하기 위해 클래스 이름 앞에 콜론 두개(::)를 붙여 표시한다. 
  • 콜론 하나(:)만 붙여도 브라우저에서는 가상요소로 인식하지만 웹 브라우저에서는 인식이 안 될 수도 있다고 한다! 

 ::before , ::after

• 내용의 앞 또는 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content=""라는 속성으로 정의한다. 
• 특정 요소의 앞 또는 뒤에 지정한 내용 (text or img)을 추가할 수 있다. 
• 이 content 는 html 문서에 포함되지 않는 요소를 css에서 생성해주기 때문에 가짜 속성이고,
• content = ""가 있어야지 가상요소가 만들어지므로 필수이다! 

 

!! 그래서 나는 

1.  큰 div를 만들어서 overflow: hidden; position: relative; 속성을 주었다.
2. 이 div 안에 다른 div를 만들어서 너비와 높이 조정을 하고 position: absolute; 속성으로 위치를 조정했다.
3. 추가로 ::after 속성에 그라데이션 배경색으로 주고 애니메이션 효과를 주었다. 

결과 ↓

See the Pen 테두리 효과 by jjeonge97 (@jjeonge97) on CodePen.

 

CSS가 쉽다고 생각했는데 진짜 쉽지 않다. 내가 간단한 것들만 해왔기 때문에 쉽다고 생각했나보다ㅎ^^;;

능숙하게 잘 하는 그날까지 ..!

추가로 참고했던 코드들 ↓

See the Pen Gradient Border by alphardex (@alphardex) on CodePen.

See the Pen Animated gradient border around resizable content by Johnny Fekete (@johnnyfekete) on CodePen.