CSS로 대시 경계를 애니메이트하는 방법

데코 레이팅 된 테두리는 페이지의 모든 요소를 ​​장식 할 수 있지만 CSS 테두리는 스타일면에서 제한적입니다. 개발자는 종종 CSS 그라디언트 테두리, SVG 테두리, 여러 테두리 및 상자 테두리 및 애니메이션 모양을 모방하고 업그레이드하는 등의 솔루션을 제공합니다..

오늘은 점선 테두리 애니메이션에 대한 더 간단한 해킹을 살펴볼 것입니다 : 파선 테두리 애니메이션. 애니메이션 점선 테두리는 개요 과 상자 그림자, 후퇴에 대해 아무 소용이 없다. 개요 IE8 이후부터 지원됩니다. 그렇게하면 SVG 나 그라디언트를 사용할 때와 달리 사용자가 보더를 볼 수 있습니다. 이것을 사용하여 두 가지 색상의 대시를 만들 수도 있습니다. 한 번 보자.

테두리 만들기

먼저 경계를 만듭니다. 이를 위해 점선으로 된 외곽선과 상자 그림자를 사용합니다..

 .배너 (윤곽선 : 6px 노란색 점선; 상자 그림자 : 0 0 0 6px # EA3556; ... 

그만큼 개요 모든 가치를 필요로한다. 너비, 유형 및 색상. 그만큼 상자 그림자 에 대한 가치가 필요하다 전파 윤곽선의 너비와 색상과 같아야합니다. 외곽선과 상자 그림자를 함께 사용하면 두 색 대시의 효과가 생성됩니다..

그런 다음 모서리에서 원하는 경계선 모양의 상자 너비 또는 높이를 조정할 수 있습니다.

테두리 애니메이션하기

우리의 첫 번째 애니메이션 예제에서는 테두리가 연속적으로 움직이는 배너 모음에 CSS 키 프레임 애니메이션을 추가하여주의를 끌 것입니다. 애니메이션 효과의 경우 개요 및 상자 그림자의 색상을 간단히 바꿉니다..

@keyframes animateBorder to outline-color : # EA3556; 상자 그림자 : 0 0 0 6px 노란색; 

개요를 사용하여 윤곽선의 색상을 지정할 수 있습니다. 윤곽선 색 longhand 속성을 사용하지만 상자 그림자의 경우에는 모든 값을 현재 속기 속성에 지정해야합니다.

애니메이션이 준비되면 상자에 추가하십시오..

.배너 (윤곽선 : 6px 노란색 점선; 상자 그림자 : 0 0 0 6px # EA3556; 애니메이션 : 1 초 animateBorder 무한대 ...

국경의 전환

전환 예제에서는 그림에 테두리를 추가하고 마우스를 올리면 애니메이션이 적용됩니다. 다른 효과의 테두리 크기를 변경할 수도 있습니다.

.사진 개요 : 20px 점선 # 006DB5; 상자 그림자 : 0px 0px 0px 20px # 3CFDD3; 전환 : 모두 1 초 ... .... 사진 : 호버 outline-color : # 3CFDD3; 상자 그림자 : 0 0 0 20px # 006DB5; 

이제이 이미지 위에 마우스를 올리면 CSS가 애니메이션으로 장식 된 영광을 그려 보았습니다..

그리고 그것은 포장입니다. 점선 테두리로 점선 테두리를 대체 할 수는 있지만 그 효과는 그리 좋지 않을 수 있습니다. 애니메이션 중에 윤곽선 유형을 변경하여 몇 가지 효과를 추가 할 수도 있습니다.