Wie erstelle ich einen animierten gestrichelten Rahmen in CSS, ohne SVG oder JavaScript zu verwenden?

Gestrichelte Randanimation ohne SVG in CSS3

Die aufgeworfene Frage ist, wie der im mitgelieferten Artikel gezeigte animierte gestrichelte Randeffekt ohne Verwendung implementiert werden kann SVG oder JavaScript innerhalb der Post-Divs eines WordPress-Blogs.

Lösung zum Erzielen einer gestrichelten Randanimation ohne SVG:

Glücklicherweise ist es möglich, diesen Effekt ausschließlich mit CSS zu erzielen , nutzt mehrere Hintergründe und animiert ihre Positionen.

Hier ist ein Codeausschnitt, der die Implementierung zeigt:

<code class="css">.border {
  height: 100px;
  width: 200px;
  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;
}
.border:hover {
    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

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

In diesem Code:

• Mehrere Lineare Verläufe werden verwendet, um den gestrichelten Randeffekt zu erzeugen.
• Die Eigenschaft „Hintergrundposition“ wird beim Schweben animiert, um die Verlaufspositionen zu verschieben und Bewegung zu erzeugen.
• Der Schwebezustand löst die Animation aus und gibt die Eindruck eines gestrichelten Randes mit bewegter Wirkung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen animierten gestrichelten Rahmen in CSS, ohne SVG oder JavaScript zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!