Wie erstelle ich CSS3-Randanimationen ohne SVG?

CSS3-Randanimation ohne SVG

Der Artikel, auf den verwiesen wird, zeigt eine auffällige gestrichelte Randanimation, die mit SVG erstellt wurde. Obwohl diese Animation optisch ansprechend sein kann, ist sie aufgrund ihres SVG-Charakters möglicherweise nicht für alle Anwendungen geeignet. In diesem Artikel wird ein alternativer Ansatz untersucht, um einen ähnlichen Effekt ausschließlich mit CSS3 zu erzielen, ohne dass JavaScript oder SVG erforderlich ist.

Um diesen Ansatz zu veranschaulichen, betrachten wir den folgenden Codeauszug:

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

.go:hover {
  border-width: 12px;
}</code>

<code class="html"><div class="go">
  This is a div with dashed border animation.
</div></code>

In diesem Beispiel definieren wir eine Klasse .go mit einem gestrichelten Rand. Wenn wir mit der Maus über das Div fahren, erhöhen wir dynamisch die Rahmenbreite und erzeugen so einen optisch erweiternden Effekt. Diese grundlegende Animation kann mit zusätzlichen CSS-Techniken verbessert werden.

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed black;
  animation: dash 2s infinite;
}

@keyframes dash {
  0% {
    border-width: 0px;
  }
  100% {
    border-width: 16px;
  }
}</code>

Hier stellen wir CSS-Animationen vor, um einen kontinuierlichen Stricheffekt zu erzeugen. Die @keyframes-Regel definiert eine Reihe von Zuständen im Zeitverlauf und die Animationseigenschaft gibt die Parameter der Animation an. Diese Animation erzeugt einen optisch ansprechenderen Effekt, bei dem sich der gestrichelte Rand dynamisch ausdehnt und zusammenzieht.

Das obige ist der detaillierte Inhalt vonWie erstelle ich CSS3-Randanimationen ohne SVG?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!