Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich CSS3-Randanimationen ohne SVG oder JavaScript?

Wie erstelle ich CSS3-Randanimationen ohne SVG oder JavaScript?

Barbara Streisand
Freigeben: 2024-11-02 18:54:31
Original
1107 Leute haben es durchsucht

How to Create CSS3 Border Animations Without SVG or 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage