SVG나 JavaScript 없이 CSS3 테두리 애니메이션을 만드는 방법은 무엇입니까?

SVG 또는 JavaScript가 없는 CSS3 테두리 애니메이션

종종 SVG를 사용하여 생성되는 tympanus.net에서 볼 수 있는 인기 있는 테두리 애니메이션은 순수 CSS3를 사용하여 다시 생성할 수 있습니다. 이 문서에서는 관련 단계를 설명합니다.

애니메이션 만들기

다양한 배경을 사용하고 해당 위치에 애니메이션을 적용하면 이 효과를 얻을 수 있습니다. 코드는 다음 HTML로 시작합니다.

<code class="html"><div class="border">
  Some text
</div></code>

애니메이션용 CSS에는 모든 면에 점선 테두리를 만드는 4개의 선형 그라데이션이 포함되어 있습니다.

<code class="css">.border {
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}</code>

이렇게 하면 4개의 그라데이션으로 배경이 설정됩니다. 점선 테두리.

마우스를 올리면 배경 위치가 수정되어 애니메이션 효과가 생성됩니다.

<code class="css">.border:hover {
  background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

구현

이 애니메이션을 추가하려면 각 블로그 게시물 div를 사용하려면 WordPress 템플릿의 div에 "테두리" 클래스를 추가하기만 하면 됩니다.

이 기술은 WordPress 블로그 게시물에 원하는 테두리 애니메이션을 추가하기 위한 간단한 CSS 전용 솔루션을 제공합니다.

위 내용은 SVG나 JavaScript 없이 CSS3 테두리 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!