Wie kann ich gestrichelte Ränder in CSS3 ohne SVG oder JavaScript animieren?

Gestrichelte Ränder mit CSS3-Animation animieren

Inspiriert durch einen Artikel über Tympanus möchten Sie die auffällige gestrichelte Randanimation in Ihr Projekt integrieren WordPress-Blogbeiträge. Die Herausforderung besteht jedoch darin, diesen Effekt zu reproduzieren, ohne auf SVG oder JavaScript angewiesen zu sein.

Um dies allein mit CSS zu erreichen, können Sie die Leistungsfähigkeit mehrerer Hintergründe nutzen. Indem Sie zwei lineare Farbverläufe kombinieren und ihre Positionen durch Animation anpassen, können Sie die Illusion eines geschwungenen Randes erzeugen. So geht's:

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

Dieser Code erstellt vier lineare Farbverläufe mit jeweils unterschiedlicher Richtung und wechselt dann ihre Positionen über die Eigenschaft „Hintergrundposition“. Die Übergangseigenschaft sorgt für einen reibungslosen Animationseffekt, wenn der Benutzer mit der Maus über das Element fährt.

Dieser Ansatz ahmt die gestrichelte Rahmenanimation nach, ohne dass SVG oder JavaScript erforderlich ist, sodass Sie ganz einfach dynamische Ränder zu Ihren WordPress-Blogbeiträgen hinzufügen können .

Das obige ist der detaillierte Inhalt vonWie kann ich gestrichelte Ränder in CSS3 ohne SVG oder JavaScript animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!