CSS -Konvertierung: Ein leistungsstarkes Werkzeug zur L?sung von Designschwierigkeiten

In diesem Artikel wird die Leistung der CSS-Konvertierung in realen Anwendungen untersucht, wie er verschiedene Designherausforderungen effektiv l?sen und überzeugende visuelle Effekte erzielen kann. Wir lernen, wie man Elemente vertikal ausrichtet, sch?ne Pfeile erstellt, Ladeanimationen erstellt und Flip -Animationen usw. implementiert.

Die

CSS3 -Konvertierung wurde 2012 Standard, und zuvor haben einige Browser Unterstützung geleistet. Mit der Transformation k?nnen Sie die Webelemente wie Rotation, Skalierung oder Kippelemente problemlos transformieren, um nur eine Codezeile zu erreichen, die zuvor schwer zu erreichen war. Die CSS -Konvertierung unterstützt 2D- und 3D -Transformationen.

In Bezug auf die Browserkompatibilit?t unterstützen alle Mainstream -Browser die 2D -Konvertierung, einschlie?lich Internet Explorer 9 und sp?ter. Die 3D -Konvertierung wird nur teilweise in IE10 und sp?ter unterstützt.

In diesem Artikel werden die Grundlagen der Konvertierung nicht erkl?rt. Wenn Sie mit der Konvertierung nicht vertraut sind, wird empfohlen, zuerst die Einführung in die 2D- und 3D -Konvertierung zu lesen.

vertikale Ausrichtung von Kinderelementen

Die vertikale Ausrichtung von Elementen war für Webdesigner schon immer ein Problem. Obwohl es einfach erscheint, gibt es tats?chlich viele umst?ndliche Techniken. Einige Methoden empfehlen,

und display: inline zu verwenden, andere empfehlen, vertical-align: middle und deren zugeh?rige Stile zu verwenden. Natürlich kann Flexbox oder Grid dieses Problem l?sen, aber für kleinere Komponenten kann die Konvertierung eine einfachere Option sein. display: table

Wenn Elemente sehr variabel sind, kann die vertikale Ausrichtung komplizierter sein. Die CSS -Konvertierung bietet eine effektive M?glichkeit, dieses Problem zu l?sen. Hier ist ein einfaches Beispiel mit zwei verschachtelten Divs:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Wir setzen die Breite, H?he und Rand für das übergeordnete Element und fügen etwas Abstand hinzu, um sie sch?ner zu machen:

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Verwenden Sie dann

, um den Text vertikal zu zentrieren: transform: translateY(-50%);

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Um Unsch?rfe zu vermeiden, k?nnen Sie

: perspective(1px) hinzufügen

.child {
  transform: perspective(1px) translateY(-50%);
}

Auf diese Weise k?nnen die Kinderelemente, auch wenn die Textl?nge unterschiedlich ist, perfekt vertikal zentriert werden.

Erstellen Sie einen Pfeil

Ein weiterer interessanter Anwendungsfall ist das Erstellen von skalierbaren Dialogpfeilen. Sie k?nnen Pfeile mit einem Grafikeditor erstellen, dies ist jedoch umst?ndlich und das Bitmap -Bild kann m?glicherweise nicht gut skaliert werden.

reine CSS -L?sungen sind effektiver. Angenommen, wir haben ein Textfeld:

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Erstellen Sie einen Pfeil mit dem

pseudoelement und konvertieren Sie ihn mit einer Rotationstransformation in eine Pfeilform: ::before

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}

Auf diese Weise k?nnen die Pfeile, auch wenn die Seitenschriftengr??e ge?ndert wird, den Anteil beibehalten.

Erstellen Sie "Sprungball" -Ladenanimation

Um den Ladevorgang anzuzeigen, k?nnen Sie mithilfe von CSS -Animation und -Transformation eine Sprungball -Ladeanimation erstellen:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Erstellen Sie die Ladeanimation "Rotator" mit SVG (dieser Teil ?hnelt dem Originaltext. Um die Duplikation zu vermeiden, wird der detaillierte Code hier weggelassen, und nur der überblick wird beibehalten)

SVG kann verwendet werden, um komplexere Ladeanimationen wie Spinner zu erstellen. Durch die Kombination von SVG -Elementen, CSS -Animationen und Transformationen k?nnen Sie visuell ansprechende Ladeeffekte erzeugen.

Erstellen Sie eine Flip -Animation

Schauen wir uns schlie?lich ein Beispiel eines Bildes mit einer Flip -Animation an. Wenn Sie Ihre Maus über das Bild schweben, flippt sie um und zeigt seine Beschreibung an. Dies ist sehr nützlich für Instagram-?hnliche Websites. (Dieser Teil des Inhalts ?hnelt dem Originaltext. Um eine Duplikation zu vermeiden, wird der detaillierte Code hier weggelassen und nur der überblick wird beibehalten)

glatte Flip -Animationseffekte k?nnen durch Verwendung von 3D -Konvertierung und transform-style: preserve-3d; sowie die transition Eigenschaften erreicht werden.

Vorsichtsma?nahmen

W?hrend CSS -Umwandlung und Animation leistungsstark sind, sollten sie mit Vorsicht verwendet werden, um zu vermeiden, dass überbeanspruchung eine schlechte Benutzererfahrung verursacht.

Zusammenfassung

Dieser Artikel zeigt, wie CSS -Umwandlung mit anderen Technologien kombiniert werden kann, um verschiedene Designaufgaben zu l?sen. Wir haben gelernt, wie man Elemente vertikal ausrichtet, skalierbare Pfeile erstellt, Lastanimationen springt und dreht und Flip -Animationen implementiert. Denken Sie daran, dass CSS verwendet werden sollte, um die Benutzererfahrung zu verbessern und nicht nur zu zeigen.

(Der Inhalt der "h?ufig gestellten Fragen zu CSS -Transformationen" im Originaltext stimmt stark mit dem Inhalt dieses Artikels überein, sodass er hier weggelassen wird)

Das obige ist der detaillierte Inhalt vonVerwenden von CSS -Transformationen in der realen Welt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!