Wie verwendet ich das Formattribut von CSS, um den Anzeigeeffekt von schrittweisen Verkürzung von Text zu erzielen?

CSS Form-Outside-Eigenschaft realisiert den Texteffekt

In diesem Artikel wird eine eindeutige Webseiten -Textanzeigetechnik eingeführt: Verkürzen Sie die Textlänge nach und nach und erstellen Sie dynamische visuelle Effekte, die für kreative Webseiten oder Kunstanzeigen sehr geeignet ist.

Dies kann durch shape-outside Eigenschaft erreicht werden. shape-outside können Sie eine nicht respektuläre Form definieren, die Text umgibt, was zu einem visuellen Effekt von Textverblasen führt.

Das folgende Beispiel zeigt, wie dies mit shape-outside erreicht wird:

 .Container {
  Breite: 300px;
  Höhe: 300px;
  Position: Relativ;
}

.Form {
  Breite: 100%;
  Höhe: 100%;
  Hintergrundfarbe: #f0f0f0;
  Clip-Pfad: Polygon (0 0, 100% 0, 100% 100%, 0 100%); /* Einstellbare Form*/
  Form-Outside: Polygon (0 0, 100% 0, 100% 100%, 0 100%); /* Übereinstimmen mit Clip-Pfad*/
  float: links;
}

.Text {
  Rand-Links: 30px;
  Schriftgröße: 18px;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">
    Dies ist ein Beispieltext, der allmählich kürzer wird. Dies ist ein Beispieltext, der allmählich kürzer wird.
  </div>
</div>

Im Code definieren clip-path und shape-outside -Attribute gemeinsam eine Polygonform. Durch Ändern der Scheitelpunktkoordinaten des Polygons können Sie die Form des Textverpackung anpassen, um den Effekt des Textverblasses zu steuern. Es ist zu beachten, dass der Wert der shape-outside mit clip-path übereinstimmen sollte, um die Genauigkeit des Effekts zu gewährleisten.

Um diesen Effekt tiefer zu untersuchen, können Sie versuchen, die Koordinatenwerte von polygon zu ändern, um verschiedene Formen zu erzeugen, um verschiedene Texteffekte zu erzielen. Sie können beispielsweise versuchen, komplexere Formen wie Kreise oder Kurven für einen reicheren visuellen Effekt zu verwenden. Denken Sie daran, der Schlüssel besteht darin, polygon anzupassen, um die Form zu steuern und so zu steuern, wie der Text angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie verwendet ich das Formattribut von CSS, um den Anzeigeeffekt von schrittweisen Verkürzung von Text zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!