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
So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)
Kürzlich wurde auf Unternehmensseite gemeldet, da...
Beispiel zum Referenzieren von Umgebungsvariablen in Docker Compose
In einem Projekt müssen Sie häufig Umgebungsvaria...
So lösen Sie das Problem der langsamen Geschwindigkeit von MySQL wie bei Fuzzy-Abfragen
Frage: Warum ist die Like-Fuzzy-Abfrage immer noc...
So verwenden Sie mysqldump zum Sichern von MySQL-Daten
1. Einführung in mysqldump mysqldump ist ein logi...
Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt
Bei der Replikation werden die DDL- und DML-Opera...
So installieren Sie Django in einer virtuellen Umgebung unter Ubuntu
Führen Sie die folgenden Vorgänge im Ubuntu-Befeh...
Vue implementiert Paging-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
JS realisiert die automatische Wiedergabe der Timeline
Vor kurzem habe ich einen solchen Effekt implemen...
CSS3-Implementierungscode für den kreisförmigen Fortschritts-Tick-Effekt
Inhaltsverzeichnis 8. Kreisförmiger Fortschritts-...
Eine kurze Analyse der Verwendung von JDBC zum Betreiben von MySQL erfordert das Hinzufügen von Class.forName("com.mysql.jdbc.Driver")
Einführung Wenn Sie mit der Verwendung von JDBC z...
Implementierung eines einfachen Timers basierend auf der Vue-Methode
Der einfache Timer von Vue dient Ihnen als Refere...
Hyperlink-Tag für HTML-Webseiten
Lernprogramm zum Hyperlink-Tag einer HTML-Webseit...
Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen
Phänomen: Wandeln Sie das Div in einen Kreis, ein...
MySQL verwendet Trigger, um das Zeilenlimit der Tabelle in der Datenbank zu lösen. Detaillierte Erklärung und Beispiele
MySQL verwendet Trigger, um das Zeilenlimit der T...
Praktische Fähigkeiten, die beim Aufrufen von UNI-APP-Komponenten im easycom-Modus beherrscht werden müssen
Dieser Artikel soll als Ausgangspunkt für Diskuss...