So erstellen Sie mit CSS3 box-reflect einen Reflexionseffekt

Um diesen Effekt zu erzielen, mussten wir in der Vergangenheit nur ein Design finden und dann ein Bild auf der Seite einfügen. Mit dem Aufkommen von CSS3 können wir ihn jedoch mit reinem Code erreichen ? Dies geschieht durch die Box-Reflect-Eigenschaft von CSS3. Im folgenden Artikel erfahren Sie, wie Sie mithilfe von CSS3 einen Reflexionseffekt erstellen.

Kompatibilität

Da es sich um eine Eigenschaft von CSS3 handelt, müssen wir natürlich einen Blick auf die Kompatibilität werfen: klicken Sie auf Ansicht

Als nächstes lernen wir, wie man Box-Reflect verwendet?

Die Syntax lautet wie folgt:

  -webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
  box-reflect:none | <direction> <offset>? <mask-box-image>?

Attributbeschreibung:

keine: Dieser Wert ist der Standardwert und gibt an, dass keine Reflexion erfolgt.

Richtung: die Richtung, in der die Reflexion erfolgt generiert

oben: Geben Sie an, dass die Spiegelung über dem Objekt liegen soll. Unten: Geben Sie an, dass die Spiegelung unter dem Objekt liegen soll. Links: Geben Sie an, dass sich die Spiegelung auf der linken Seite des Objekts befinden soll. Rechts: Geben Sie die Spiegelung an auf der rechten Seite des Objekts sein

Offset: Der Abstand zwischen dem Bild und der Reflexion

Länge: Verwenden Sie den Längenwert, um den Abstand zwischen der Reflexion und zu definieren das Objekt. Kann ein negativer Prozentwert sein: Verwenden Sie den Prozentsatz, um den Abstand zwischen der Reflexion und dem Objekt zu definieren. Kann negativ sein

mask-box-image: wird verwendet, um den Maskeneffekt der Reflexion festzulegen;

Der Wert kann sein:

keine: Keine Maskenbild-URL: Geben Sie das Maskenbild mit einer absoluten oder relativen Adresse an. linearer Farbverlauf: Erstellen Sie ein Maskenbild mit einem linearen Farbverlauf. radialer Farbverlauf: Erstellen Sie ein Maskenbild mit einem radialen (radialen) Farbverlauf. Repeating-Linear-Gradient: Erstellen Sie eine Hintergrundmaske mit einem sich wiederholenden linearen Gradienten. Repeating-Radial-Gradient: Erstellt ein Maskenbild mit sich wiederholenden radialen (radialen) Farbverläufen.

Nur ​​auf dem Papier zu reden reicht nicht aus. Wir müssen die Wirkung noch anhand von Beispielen sehen.

Spiegelungsrichtung

In diesem Beispiel habe ich drei Bilder gemacht:

<p class="box1">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</p>   
<p class="box2">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</p>   
<p class="box3">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</p>

CSS lautet wie folgt:

.box1,.box2,.box3{   
  width:120px;   
  float:left;   
  margin-right:180px;   
}   
img{   
  width:100%;   
}   
.box1 img{   
  -webkit-box-reflect:right;   
  box-reflect:right;   
}   
.box2 img,.box3 img{   
  -webkit-box-reflect: above;   
  box-reflect:above;   
}   
.box3{   
  padding-top:200px;   
}

Die Darstellung lautet wie folgt:

Ich habe hier eine Frage. Die Bilder in Box2 und Box3 sind beide mit box-reflect:above versehen, was eine Projektion auf der Oberseite erzeugt. Warum ist der Effekt in Box2 nicht zu sehen? Der Grund dafür ist, dass ich padding-top:200px für Box3 eingestellt habe, aber nicht für Box2. Es wird zunächst angenommen, dass dies daran liegt, dass kein Platz für die Anzeige der generierten Reflexion vorhanden ist.

Der Abstand zwischen der Reflexion und dem Objekt

Nachdem wir die Richtung der Erzeugung der Reflexion verstanden haben, schauen wir uns das zweite Attribut an Schauen wir uns das Beispiel an:

Immer noch drei Bilder verwenden, aber den Stil ändern:

.box1 img{   
  -webkit-box-reflect:below 30px;   
  box-reflect:below 30px;   
}   
.box2 img{   
  -webkit-box-reflect:below -30px;   
  box-reflect:below -30px;   
}   
.box3 img{   
  -webkit-box-reflect:below 5%;   
  box-reflect:below 5%;   
}

Der Effekt ist wie folgt :

Als nächstes lernen wir das letzte Attribut.

Maskeneffekt

(1) Verwenden Sie einen Farbverlauf, um der Reflexion einen Maskeneffekt hinzuzufügen

  .box1 img{   
  -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
  box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
}

Der Effekt ist wie folgt:

Verwenden Sie das Hintergrundbild, um der Reflexion einen Maskeneffekt hinzuzufügen

Zuerst benötigen wir ein A-PNG-Bild eines fünfzackigen Sterns:

.box2 img{   
  -webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
  box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
}

Der Effekt ist wie folgt :

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS3 mit IE-Filtern, um Verlaufs- und Schlagschatteneffekte zu erzielen

Verwendung CSS, um dies zu erreichen. Der Effekt der Symbolrotation, wenn die Maus nach oben bewegt wird

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 box-reflect einen Reflexionseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!