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 中国語 Web サイトの他の関連記事を参照してください。