Beispielcode für reinen CSS-Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts

Beispielcode für reinen CSS-Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts

1. Prozentuale Basis für Elementbreite/-höhe/-polsterung/-rand

Kennen Sie den Richtwert, wenn Sie den Prozentsatz für Breite/Höhe/Polsterung/Rand eines Elements festlegen?

Zum Beispiel:

.übergeordnet {
  Breite: 200px;
  Höhe: 100px;
}
.Kind {
  Breite: 80%;
  Höhe: 80%;
}
.KindKind {
  Breite: 50%;
  Höhe: 50 %;<br> Polsterung: 2 %;<br> Rand: 5 %;<br>
}  

<div Klasse="übergeordnet">
    <div Klasse="Kind">
        <div Klasse="KindKind"></div>
    </div>
</div>

Wie breit ist das untergeordnete Element im obigen Code? Was ist Höhe? Was ist die Polsterung? Wie hoch ist die Marge?

Die Höhe eines Elements basiert prozentual auf der Höhe seines übergeordneten Elements, und die Breite, Polsterung und der Rand eines Elements basieren prozentual auf der Breite seines übergeordneten Elements.

Ich glaube, jeder hat es bereits herausgefunden. Sie können es ausprobieren ~

In Vorstellungsgesprächen stößt man häufig auf eine einfache Frage im CSS-Stil, nämlich die Implementierung eines adaptiven Quadrats. Das Prinzip basiert auf den oben genannten Erkenntnissen. Ich brauche nur

#Kasten {
            Breite: 50%;
            Polsterung oben: 50%;
            Hintergrund: #000;
        }

Da die Basiswerte der Elementbreite und des Abstands die Breite des übergeordneten Elements sind und die Breite des Hauptteils das Browserfenster ist, passt sich diese Einstellung dem Quadrat an, wenn sich die Größe des Browserfensters ändert.

2. Verwenden Sie reines CSS, um den Effekt einer dreidimensionalen Bildplatzierung zu erzielen

Zurück zum Thema: Wenn Sie den dreidimensionalen Platzierungseffekt der in der folgenden Abbildung gezeigten Bilder erzielen möchten, müssen Sie Ihr Wissen über Polsterung, Breite und Höhe anwenden.

Das kommt mir irgendwie bekannt vor. Ist es dem Stil der empfohlenen Bücher in neuer Software ähnlich?

Schauen wir uns hier zunächst die Platzierung an. Ein Bild ist horizontal zentriert und im Vordergrund, während die anderen beiden Bilder links und rechts und etwas weiter hinten ausgerichtet sind, sodass eine dreidimensionale Platzierung entsteht. Hier habe ich eine Möglichkeit kennengelernt, diesen dreidimensionalen Effekt ganz einfach durch den Einsatz von CSS zu erzielen.

Unterstützt werden die unterschiedlichen Höhen durch Polsterauflagen, welche in unterschiedlichen Größen erhältlich sind.

· Die Vorher- und Nachher-Effekte werden durch die Faltreihenfolge des Z-Index gesteuert.

Die Anordnung wird durch das n-te Pseudoelement + Position gesteuert.

Hast Du eine Idee? Reden wir nicht um den heißen Brei herum und kommen wir direkt zum Code.

<html>
    <Kopf>
        <Stil>
            * {
                Rand: 0;
                Polsterung: 0;
            }
            .Kasten {
                Breite: 300px;
                Höhe: 200px;
                Position: relativ;
            }
            .img {
                Breite: automatisch;
                Höhe: 0;
            }
            .box img {
                Breite: 100 %;
                Anzeige: Inline-Block;
            }
            .box .img:n-ter-Typ(1) {
                Anzeige: Inline-Block;
                Position: absolut;
                links: 50%;
                oben: 50 %;
                Polsterung unten: 50 %;
                transformieren: übersetzen(-50 %, -50 %);
                Z-Index: 6;
            }
            .box .img:n-ter-vom-Typ(2), .box .img:n-ter-vom-Typ(3) {
                Position: absolut;
                oben: 50 %;
                transformieren: verschiebeY(-50%);
                Polsterung unten: 63 %;
                Z-Index: 3;
            }
            .box .img:n-ter-Typ(2) {
                rechts: 0;
            }
            .box .img:n-ter-Typ(3) {
                links: 0;
            }
        </Stil>
    </Kopf>
    <Text>
        <div Klasse="Box">
            <div Klasse="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div Klasse="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div Klasse="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
        </div>
    </body>
</html>

Zusammenfassen

Das Obige ist die reine CSS-Methode, die vom Editor eingeführt wurde, um den dreidimensionalen Bildanordnungseffekt zu erzielen. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Unterschied zwischen den Methoden querySelector und getElementById in JS

>>:  Detaillierter Prozess zum Kompilieren und Installieren von Storm auf dem Kylin V10-Server

Artikel empfehlen

Detaillierte Erläuterung des Watch-Listener-Beispiels in vue3.0

Inhaltsverzeichnis Vorwort Der Unterschied zwisch...

Mehrere Elemente in derselben Zeile unter Div in CSS rechtsbündig ausrichten

Methode 1: schweben: rechts Darüber hinaus wird d...

Docker installiert Redis und führt den visuellen Client für den Betrieb ein

1 Einleitung Redis ist eine leistungsstarke, auf ...

So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

Inhaltsverzeichnis Bindungsklasse Inline-Stile bi...

So aktivieren Sie die Protokollfunktion für langsame Abfragen in MySQL

Das MySQL-Protokoll für langsame Abfragen ist seh...

Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)

1. Inline-Referenz: Wird direkt auf dem Etikett v...

JS asynchroner Code Unit-Test Magie Promise

Inhaltsverzeichnis Vorwort Verkettung von Verspre...

Praktische Optimierung des MySQL-Paging-Limits

Vorwort Wenn wir Abfrageanweisungen verwenden, mü...

Prinzip und Anwendung der MySQL-Master-Slave-Synchronisation

Inhaltsverzeichnis 1. Master-Slave-Synchronisatio...

Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)

Es gibt bereits viele Artikel über Slot-Scope auf...