Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts mit reinem CSS
|
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%;
Polsterung: 2%;
Marge: 5%;
}
<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 prozentuale Höhe eines Elements basiert auf der Höhe seines übergeordneten Elements und die prozentualen Breiten-, Polsterungs- und Randwerte eines Elements basieren 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. Die unterschiedlichen Höhen werden durch die Polsterung auf der Oberseite unterstützt, die groß oder klein sein kann. · 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>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
>>: React-Internationalisierung react-i18next ausführliche Erklärung
Artikel empfehlen
Ubuntu-Grundlagen-Tutorial: apt-get-Befehl
Vorwort Der Befehl apt-get ist ein Paketverwaltun...
Beim Zugriff auf die Homepage eines im Docker-Modus gestarteten Tomcat tritt ein 404-Fehler auf
Szenario: Beim Starten von Tomcat in Docker (Vers...
Implementierungscode für die Verwendung von „Select“ zum Auswählen von Elementen in Vue+Openlayer
Effektbild: Implementierungscode: <Vorlage>...
Das CSS3-Diamantpuzzle realisiert die Funktion, nur das Div zu drehen und das Hintergrundbild nicht zu drehen
Nachfragehintergrund Das Projekt wurde mit Vue er...
Vue2.x-Reaktionsfähigkeit – einfache Erklärung und Beispiele
1. Überprüfen Sie die Vue-Responsive-Nutzung Die...
Detaillierter Vue-Code zur Implementierung der Shuttle-Box-Funktion
Vue - Implementierung der Shuttle-Box-Funktion. D...
So erstellen Sie schnell eine statische Website in der Alibaba Cloud
Vorwort: Als Junior-Programmierer träume ich davo...
Erläuterung der MySQL-Indexoptimierung
Bei unserer täglichen Arbeit führen wir manchmal ...
Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt
Bei der Replikation werden die DDL- und DML-Opera...
Detailliertes Tutorial zur Verwendung von cmake zum Kompilieren und Installieren von MySQL unter Linux
1. Installieren Sie cmake 1. Entpacken Sie das ko...
Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue
filter werden im Allgemeinen verwendet, um bestim...
Detaillierte Erklärung der Lösung zum doppelten Einfügen von MySQL-Primärschlüssel und eindeutigem Schlüssel
Inhaltsverzeichnis Lösung: 1. IGNORIEREN 2. ERSET...
Verwenden Sie CSS, um spezielle Logos oder Grafiken zu implementieren
1. Einleitung Da Bilder viel Platz beanspruchen u...
So legen Sie die Speichergröße von Docker Tomcat fest
Wenn Sie Tomcat in Docker installieren, kann es b...
Das WeChat-Applet realisiert die Chatroom-Funktion
In diesem Artikel wird der spezifische Code des W...