Verwenden Sie CSS, um einen perspektivischen Effekt zu erzielen
Heute kam mir die Idee, CSS zu verwenden, um den perspektivischen Effekt zu erzielen. Zuerst dachte ich an unsere übliche Methode zum Hinzufügen von Schatteneffekten, die durch die Verwendung mehrerer Divs durch Offset erreicht wird, aber dafür sind viele Divs erforderlich, was nicht ideal ist. Dann fiel mir eine Eigenschaft von CSS ein: border, die an der Kreuzung von Rändern einen diagonalen Effekt erzeugen kann. Dies kann mit zwei Divs erreicht werden. Schauen wir uns zunächst den endgültigen Effekt an und analysieren dann den Implementierungsprozess.
Schauen wir uns zunächst an, wie der Rand den Diagonaleffekt erzeugt. Fügen Sie den folgenden Code zum Kopf Ihres HTML-Codes hinzu, und Sie werden einen solchen Effekt sehen.
.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}
Mit der oben genannten Grundlage können wir zwei zusätzliche Divs verwenden, um den perspektivischen Effekt zu erzielen.
1. Der HTML-Code lautet wie folgt :
<div class="perspective-outer">
<div class="perspective-r"></div>
<div class="perspective-b"></div>
<div class="perspective-inner">Perspektivisches Effektelement</div>
</div>
2. CSS-Code:
.perspective-outer{
Position:relativ;
width:170px;/*Die Breite des Elements, um den perspektivischen Effekt zu erzielen + perspektivischer Abstand*/
height:140px;/*Die Höhe des Elements, um den perspektivischen Effekt zu erzielen + perspektivischer Abstand*/
}
.perspective-inner{
border:1px solid #f60;
Höhe:118px;
Breite:148px;
Hintergrundfarbe:#fff;
}
.perspektive-r,
.perspective-b{
Position:absolut;
Breite:0;
Höhe:0;
}
.perspective-r{
rechts:0;
height:100px;/*Die Höhe des Elements, um den perspektivischen Effekt zu erzielen (120px) - (border-top:20px)*/
border-left:20px solid #000;/*Abstand der rechten Perspektive*/
border-top:20px solid #fff;/*perspektivischer Abstand unten*/
}
.perspective-b{
unten:0;
width:150px;/*Breite des äußersten Elements (170px) - border-left*/
border-left:20px solid #fff;
border-top:20px solid #000;
}
.perspective-outer definiert die Höhe und Breite und positioniert sie relativ, um sicherzustellen, dass die perspektivischen Bereiche rechts und unten an den entsprechenden Positionen positioniert werden können. Die Höhen- und Breitenwerte sind die Höhe des Elements, um die Perspektive zu erreichen Effekt plus dem entsprechenden perspektivischen Abstand. .perspective-r muss nur den Höhenwert festlegen und sein Wert ist die Höhe von .perspective-outer minus border-top. .perspective-b muss nur den Breitenwert festlegen und sein Wert ist die Breite von .perspective-. äußerer Minusrand links. Die Breitenwerte von border-top von .perspective-r und border-left von .perspective-b bestimmen den Perspektivenwinkel. Die Breitenwerte von border-left von .perspective-r und border-top von .perspective-b bestimmen den perspektivischen Abstand. Unter diesen ist die Farbe von „border-top“ von .perspective-r und „border-left“ von .perspective-b die Hintergrundfarbe des übergeordneten Elements. Das übergeordnete Element meiner Testseite hier ist body, also weiß.
3. Nachwort
Dieser Artikel ist nur ein einfacher Test, er soll andere inspirieren. Es ist uns egal, wie praktisch diese Methode ist, aber sie kann uns zumindest eine Möglichkeit bieten, das Problem zu lösen. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.