SVG 또는 JavaScript 없이 CSS3에서 점선 테두리에 애니메이션을 적용하려면 어떻게 해야 합니까?

CSS3 애니메이션을 사용하여 점선 테두리 애니메이션

Tympanus에 관한 기사에서 영감을 받아 눈길을 끄는 점선 테두리 애니메이션을 WordPress 블로그 게시물. 그러나 문제는 SVG 또는 JavaScript에 의존하지 않고 이 효과를 복제하는 것입니다.

CSS만으로 이를 달성하려면 여러 배경의 힘을 활용할 수 있습니다. 두 개의 선형 그래디언트를 결합하고 애니메이션을 통해 위치를 조정하면 테두리가 점선처럼 보이는 효과를 만들 수 있습니다. 방법은 다음과 같습니다.

<code class="css">.border {
  height: 100px;
  width: 200px;
  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;
}

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

이 코드는 각각 서로 다른 방향을 갖는 4개의 선형 그래디언트를 생성한 다음 background-position 속성을 통해 해당 위치를 교대로 만듭니다. 전환 속성은 사용자가 요소 위로 마우스를 가져갈 때 부드러운 애니메이션 효과를 보장합니다.

이 접근 방식은 SVG 또는 JavaScript가 필요 없이 점선 테두리 애니메이션을 모방하므로 WordPress 블로그 게시물에 동적 테두리를 쉽게 추가할 수 있습니다. .

위 내용은 SVG 또는 JavaScript 없이 CSS3에서 점선 테두리에 애니메이션을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!