css border animation

처음에는 아주 가볍게 '오른쪽으로 border 그대로 빛나면서 그려지는 animation 하나 있으면 좋겠다' 라고 생각했다. 아주 쉽지 않았고 border animation 에 관한 자료도 많이 찾아봤지만 많이 없었다. 4개의 래퍼런스를 찾아보았는데 비슷한 패턴들이 보여서 정리해보았다. 1. Border는 Border가 아니다. Border에 Gradient를 넣거나 Animation을 넣는 경우는 전부 border를 사용하지 않는다. 그게 무슨 말이냐면 좀 더 큰 Box를 뒤에 만들어서 가리는 형태이다. 첫 이미지를 보면 이쁘게 Gradient까지 적용한 Border로 보이지만 사실은 좀 더 큰 Gradient Box이다. 이 Box 이미지를 :before, :after에 적용을 시키고 animati..

2022.02.03