CSS만 사용하여 투명한 배경으로 부드럽게 움직이는 원 그리기 효과를 만드는 방법은 무엇입니까?

테두리 반경과 투명한 배경을 사용하는 CSS 전용 그리기 원

문제:

애니메이션 테두리를 만드는 방법 -그리기 효과를 위해 원의 초기 부분을 마스크하면서 투명한 배경을 가진 반경 원?

해결책:

1. 설립 캔버스:

   • 절대 위치 지정과 참조용 테두리로 컨테이너를 정의합니다.
   • 마스크에 대해 50% 너비, 절대 위치 지정 하프클립 요소를 만듭니다.

2. 원 만들기:

   • 하프 클립 내에 투명한 테두리와 파란색 상단이 있는 원을 배치하고 왼쪽 테두리 색상.
   • 하프 클립 내에서 원을 오른쪽 정렬하여 배치합니다.

3. 그림 애니메이션:

   • CSS 애니메이션을 사용하여 원을 초기 -45도 위치에서 135도 회전하여 그림을 그리는 모습을 연출합니다.
   • 마스크를 유지하기 위해 하프 클립을 360도 회전하도록 애니메이션합니다.

4. 투명도 유지:

   • 몸체에 반복적인 선형 그라데이션을 추가하여 투명성과 시각적 맥락을 제공합니다.
   • 그라디언트를 컨테이너 크기에 맞게 조정하고 배경 반복을 반복 없음으로 설정합니다.

5. 반원 수정 :

   • 애니메이션 없이 135도 회전된 원(고정)의 두 번째 절반을 만듭니다.
   • 고정된 절반원의 불투명도가 50% 이후에 나타나도록 애니메이션을 적용합니다.

6. 애니메이션 타이밍 제어:

   • 애니메이션 기간과 타이밍을 원하는 대로 조정하여 애니메이션 시간을 조정합니다. 원하는 그리기 속도와 효과.

코드 스니펫:

<code class="css">body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

#container {
  position: absolute;
  width: 400px;
  height: 400px;
  border: solid red 1px;
  animation: colors 4s infinite;
}

#halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  overflow: hidden;
  transform-origin: left center;
  animation: cliprotate 16s steps(2) infinite;
  -webkit-animation: cliprotate 16s steps(2) infinite;
}

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
  border-top-color: blue;
  border-left-color: blue;
  border-radius: 50%;
}

#clipped {
  width: 200%;
  animation: rotate 8s linear infinite;
  -webkit-animation: rotate 8s linear infinite;
}

#fixed {
  width: 100%;
  transform: rotate(135deg);
  animation: showfixed 16s steps(2) infinite;
  -webkit-animation: showfixed 16s linear infinite;
}

@-webkit-keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@-webkit-keyframes showfixed {
  0% { opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
</code>

위 내용은 CSS만 사용하여 투명한 배경으로 부드럽게 움직이는 원 그리기 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!