CSS를 사용하여 테두리 애니메이션 만들기

CSS는 웹 페이지에 움직임과 흥미를 더하는 아름답고 매력적인 테두리 애니메이션을 만드는 데 사용됩니다. 테두리 애니메이션을 만들려면 먼저 애니메이션을 적용할 요소에 대한 테두리를 정의해야 합니다.

테두리 애니메이션은 버튼, 링크 및 기타 대화형 요소에 호버 효과를 만드는 데 사용할 수 있습니다. 또한 페이지나 요소가 로드되는 동안 진행 상황을 표시하는 로딩 애니메이션을 만드는 데에도 사용할 수 있습니다. -더 눈에 띄게 만드는 작업 버튼.

접근 - 1

사용자가 요소 위로 마우스를 가져갈 때 요소의 테두리에 애니메이션을 적용하는 호버 효과를 만들어 보겠습니다.

알고리즘

• HTML 문서를 만들고 제목을 "호버 효과 테두리 애니메이션"으로 정의합니다.

문서 본문을 설정하고 Flexbox를 사용하여 상자 중앙에 배치하고 배경색을 #48b6ff로 지정합니다. 인라인 블록 디스플레이, 10px 패딩, 18px 글꼴 크기, 색상 #333 및 2px 투명 실선 테두리를 사용하여 상자 클래스를 정의합니다. 전환 시간은 0.5초이고 전환 효과는 쉽습니다.

• 무한 지속 시간과 이지아웃 타이밍으로 테두리에 펄스 애니메이션을 추가하세요. 테두리를 빨간색에서 녹색, 파란색으로 페이드하고 마우스가 상자 위에 있을 때 진동하는 애니메이션을 비활성화합니다.

• 테두리 색상을 빨간색에서 녹색, 파란색으로 변경하는 키프레임으로 펄스 애니메이션을 정의합니다. HTML 문서의 본문에 상자 클래스가 있는 div 요소를 추가합니다.

• 호버 효과 테두리 애니메이션을 보려면 HTML 파일을 웹 브라우저에 저장하고 확인하세요.

Example

Example

방법 - 2

여기에서는 로딩 아이콘 테두리에 애니메이션을 적용하여 로딩 애니메이션을 만들어 보겠습니다.

알고리즘

• 선언을 사용하여 문서 유형을 HTML로 선언합니다.

• 태그를 열어 HTML 문서를 시작하세요.

• 태그 안에 태그를 추가하세요.

• 태그 안에