Wie erstelle ich CSS3-Randanimationen ohne SVG oder JavaScript?

CSS3-Randanimation ohne SVG oder JavaScript

Die beliebte Randanimation auf tympanus.net, die oft mit SVG erstellt wird, kann mit reinem CSS3 nachgebildet werden. In diesem Artikel werden die erforderlichen Schritte erläutert.

Erstellen der Animation

Durch die Verwendung mehrerer Hintergründe und das Animieren ihrer Positionen wird dieser Effekt erzielt. Der Code beginnt mit dem folgenden HTML:

<code class="html"><div class="border">
  Some text
</div></code>

Das CSS für die Animation enthält vier lineare Verläufe, um gestrichelte Ränder auf allen Seiten zu erstellen:

<code class="css">.border {
  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;
}</code>

Dadurch wird der Hintergrund mit seinen vier festgelegt gestrichelte Ränder.

Beim Bewegen des Mauszeigers werden die Hintergrundpositionen geändert, um den Animationseffekt zu erzeugen:

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

Implementierung

Um diese Animation hinzuzufügen Fügen Sie für jedes Blog-Beitrags-Div einfach die Klasse „border“ zum Div in Ihren WordPress-Vorlagen hinzu.

Diese Technik bietet eine einfache und reine CSS-Lösung zum Hinzufügen der gewünschten Rahmenanimation zu Ihren WordPress-Blog-Beiträgen.

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