So erzielen Sie mit CSS einen perspektivischen Effekt

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.

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 PS durch Offset erreicht wird, aber dafür sind viele PS 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 Ps 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 PS verwenden, um den perspektivischen Effekt zu erzielen.

1. Der HTML-Code lautet wie folgt :

<p class="perspective-outer">
 <p class="perspective-r"></p>
 <p class="perspective-b"></p>
 <p class="perspective-inner">透视效果元素</p>
</p>

2. CSS-Code:

.perspective-outer{
 position:relative;
 width:170px;/*要实现透视效果元素的宽度＋透视距离*/
 height:140px;/*要实现透视效果元素的高度＋透视距离*/
}
.perspective-inner{
 border:1px solid #f60;
 height:118px;
 width:148px;
 background-color:#fff;
}
.perspective-r,
.perspective-b{
 position:absolute;
 width:0;
 height:0;
}
.perspective-r{
 right:0;
 height:100px;/*要实现透视效果元素的高度(120px) - (border-top:20px)*/
 border-left:20px solid #000;/*右边透视距离*/
 border-top:20px solid #fff;/*下边透视距离*/
}
.perspective-b{
 bottom:0;
 width:150px;/*最外元素的宽度(170px) - border-left*/
 border-left:20px solid #fff;
 border-top:20px solid #000;
}

.perspective-outer Definiert die Höhe und Breite sowie die relative Positionierung, um sicherzustellen, dass der perspektivische Bereich rechts und unten an der entsprechenden Position positioniert werden kann. Der Höhenwert und der Breitenwert sind die Höhe des Elements, um den perspektivischen Effekt zu erzielen, plus den 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 des oberen Randes von .perspective-r und des linken Randes von .perspective-b die Hintergrundfarbe des übergeordneten Elements. Das übergeordnete Element meiner Testseite ist hier der Körper, also weiß.

3. Nachtrag

Dieser Artikel ist nur ein einfacher Test und 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.

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, um den Farbverlauf-Glüheffekt des Eingabeeingabefelds zu erzielen

Wie CSS3 verwenden, um ein einfaches 3D-durchsichtiges Würfelbild zu erstellen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen perspektivischen Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!