Wie erstelle ich nur mit CSS einen reibungslos animierten Kreiszeichnungseffekt mit transparentem Hintergrund?

Nur ​​CSS animieren, Zeichnungskreis mit Rahmenradius und transparentem Hintergrund

Problem:

So erstellen Sie einen animierten Rahmen -Radiuskreis mit transparentem Hintergrund und gleichzeitig Maskierung des ersten Teils des Kreises für einen Zeicheneffekt?

Lösung:

1. Einrichten die Leinwand:

   • Definieren Sie den Container mit absoluter Positionierung und einem Rahmen als Referenz.
   • Erstellen Sie ein 50 % breites, absolut positioniertes Halbclip-Element für die Maske.

2. Erstellen Sie den Kreis:

   • Platzieren Sie innerhalb des Halbclips einen Kreis mit transparentem Rand und blauer Oberseite und Farben des linken Randes.
   • Positionieren Sie den Kreis rechtsbündig innerhalb des Halbclips.

3. Zeichnung animieren:

   • Verwenden Sie CSS-Animationen, um den Kreis um 135 Grad von seiner anfänglichen -45-Grad-Position zu drehen, um den Eindruck einer Zeichnung zu erwecken.
   • Animieren Sie den Halbclip, um ihn um 360 Grad zu drehen, damit die Maske erhalten bleibt Platz während der Drehung.

4. Transparenz beibehalten:

   • Fügen Sie dem Körper einen sich wiederholenden linearen Farbverlauf hinzu, um Transparenz zu gewährleisten Stellen Sie visuellen Kontext bereit.
   • Skalieren Sie den Farbverlauf auf die Containergröße und stellen Sie die Hintergrundwiederholung auf „Keine Wiederholung“ ein.

5. Korrigieren Sie den Halbkreis :

   • Erstellen Sie eine zweite Hälfte des Kreises (fest) ohne Animation, gedreht um 135 Grad.
   • Animieren Sie die Deckkraft des festen Halbkreises so, dass sie nach 50 % erscheint. der Animationszeit.

6. Animationszeitpunkt steuern:

   • Passen Sie die Animationsdauer und -zeiten wie gewünscht an, um das zu erreichen gewünschte Zeichengeschwindigkeit und Wirkung.

Code-Snippet:

<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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich nur mit CSS einen reibungslos animierten Kreiszeichnungseffekt mit transparentem Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!