Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner
|
Ich habe in letzter Zeit viel Wissen und Artikel über CSS3 gelesen und denke, dass CSS3 sehr praktisch zu verwenden ist. Wenn Sie CSS3 verwenden, können Sie beim Seitenlayout viele unnötige Codes einsparen. Ich habe vor Kurzem CSS3 verwendet, um das Aussehen des Haushuhns nachzuahmen, um das ich mich jeden Tag kümmere. Da ich das zum ersten Mal geschrieben habe, wurden einige Details nicht gut genug behandelt. Schauen Sie sich zunächst das endgültige Effektbild an:
Hier sind die Schritte, die ich geschrieben habe: Schreiben Sie zunächst die Wolken, den Hühnerkörper, den Kamm, die Augen, den Mund, die Röte, die Flügel und die Hühnerfüße in HTML.
<Text>
<div Klasse="Inhalt">
<!-- Wolken am Himmel-->
<div Klasse="Wolke">
<div Klasse="Inhalt"></div>
</div>
<!--Hahnenkamm-->
<div Klasse="Wappen"></div>
<!--Flügel-->
<div class="hand"></div>
<!-- Körper eines Hühnerhaustieres -->
<div Klasse="Ei">
<!--Augen-->
<div Klasse="Auge"></div>
<!--Erröten-->
<div Klasse="erröten"></div>
<!--Mund-->
<div Klasse = "Mund"></div>
<!--Füße-->
<div Klasse="Füße"></div>
</div>
</div>
</body>Als nächstes folgt die CSS-Stileinstellung: Legen Sie zunächst die gesamte Hintergrundfarbe mithilfe eines linearen Farbverlaufs fest, legen Sie die blaue Himmels- und Grasfarbe fest und richten Sie das Element so aus, dass es zentriert wird.
.Inhalt {
Breite: 100 %;
Höhe: 800px;
Hintergrund: linearer Farbverlauf (RGB (170, 227, 253) 60 %, RGB (149, 219, 126) 80 Pixel);
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}Wolken am Himmel: Geben Sie zuerst eine bestimmte Breite, Höhe und Hintergrundfarbe an, verwenden Sie den Rahmenradius, um den Rahmenrundungseffekt festzulegen, und legen Sie nur die obere linke und die obere rechte Ecke fest. Die Wirkung ist wie folgt: Randradius: 100 % 100 % 0 0;
Zeichnen Sie eine vollständige Wolke mit den Pseudoelementen ::before und ::after:
.Inhalt::vorher,
.inhalt::nach {
Inhalt: '';
Position: absolut;
unten: 0;
}
.content::before {
Breite: 40px;
Höhe: 40px;
Hintergrund: aktuelle Farbe;
links: -20px;
Randradius: 100 % 100 % 0 100 %;
}
.inhalt::nach {
Breite: 35px;
Höhe: 30px;
Hintergrund: aktuelle Farbe;
rechts: -20px;
Randradius: 100 % 100 % 100 % 0;
}Zeichnen Sie dann mit Schatten zwei Wolken.
.Inhalt,
.Inhalt::vorher,
.inhalt::nach {
Kastenschatten:
-200px 50px 0 -5px rgb(191, 232, 252),
200px 60px 0 10px rgb(191, 233, 253);
}
Die Wolken materialisierten sich. Als nächstes kommt das Haushuhn. Zeichnen Sie zuerst den Körper. Verwenden Sie border-radius, um den Randradiuseffekt einzustellen. Zeichnen Sie die Form eines Eies, legen Sie die Hintergrundfarbe fest und verwenden Sie box-shadow, um den Schatten nach innen einzustellen.
.Ei {
Breite: 220px;
Höhe: 260px;
Randradius: 100 %;
Hintergrund: linearer Farbverlauf (RGB (254, 249, 249) 60 %, RGB (221, 213, 213));
Position: absolut;
Anzeige: Flex;
Flex-Richtung: Spalte;
Elemente ausrichten: zentrieren;
Boxschatten: 0 -10px 10px 3px rgba(211, 194, 194,0,4) Einschub;
}
Die Schreibstile von Hahnenkamm und Wolke sind ähnlich.
.wappen {
Position: relativ;
oben: -17%;
Breite: 30px;
Höhe: 25px;
Hintergrund: rgb(233, 19, 19);
Randradius: 50 % 100 % 20 % 20 %;
}
.crest::vorher,
.crest::nach {
Inhalt: '';
Position: absolut;
unten: 0;
Breite: 20px;
Hintergrund: rgb(233, 19, 19);
}
.crest::vor {
links: -5px;
Höhe: 20px;
Randradius: 100 % 50 % 0 20 %;
}
.crest::nach {
rechts: -15px;
Höhe: 15px;
Hintergrund: rgb(233, 19, 19);
Randradius: 20 % 200 % 20 % 30 %;
}Augen, Flügel und Erröten können durch die Verwendung von Pseudoelementen erzielt werden, indem sie links und rechts positioniert und ihre Größe festgelegt werden. Drehen Sie den Mund mithilfe der Transformation um 45° und stellen Sie mit einem linearen Farbverlauf den Schatteneffekt des Hühnerschnabels ein. Alle CSS-Codes lauten wie folgt (ich habe das SASS-Plugin installiert, daher sind sie in SCSS geschrieben):
Körper {
Rand: 0;
Breite: 100 %;
Höhe: 100%;
>.Inhalt {
Breite: 100 %;
Höhe: 800px;
Hintergrund: linearer Farbverlauf (RGB (170, 227, 253) 60 %, RGB (149, 219, 126) 80 Pixel);
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
>.cloud {
Position: absolut;
oben: 5%;
Farbe: RGB (216, 242, 254);
>.Inhalt {
Breite: 50px;
Höhe: 50px;
Hintergrund: aktuelle Farbe;
Randradius: 100 % 100 % 0 0;
}
>.content::before,
>.inhalt::nach {
Inhalt: '';
Position: absolut;
unten: 0;
}
>.content::before {
Breite: 40px;
Höhe: 40px;
Hintergrund: aktuelle Farbe;
links: -20px;
Randradius: 100 % 100 % 0 100 %;
}
>.inhalt::nach {
Breite: 35px;
Höhe: 30px;
Hintergrund: aktuelle Farbe;
rechts: -20px;
Randradius: 100 % 100 % 100 % 0;
}
>.Inhalt,
.Inhalt::vorher,
.inhalt::nach {
Boxschatten: -200px 50px 0 -5px rgb(191, 232, 252),
200px 60px 0 10px rgb(191, 233, 253);
}
}
>.Ei {
Breite: 220px;
Höhe: 260px;
Randradius: 100 %;
Hintergrund: linearer Farbverlauf (RGB (254, 249, 249) 60 %, RGB (221, 213, 213));
Position: absolut;
Anzeige: Flex;
Flex-Richtung: Spalte;
Elemente ausrichten: zentrieren;
Boxschatten: 0 -10px 10px 3px rgba(211, 194, 194,0,4) Einschub;
>.eye::vorher,
.eye::nach {
Inhalt: '';
Position: absolut;
oben: 15 %;
Breite: 12px;
Höhe: 28px;
Randradius: 100 %;
Hintergrund: radialer Farbverlauf (weiß 1px, rgb(57, 56, 57) 5%);
}
> .eye::vor{
links: 28%;
}
>.eye::nach {
rechts: 28%;
}
>.blush::vorher,
.blush::nach {
Inhalt: '';
Position: absolut;
oben: 30%;
Breite: 25px;
Höhe: 5px;
transformieren: drehen (0 Grad);
Hintergrund: RGB (250, 108, 127);
Randradius: 100 %;
Kastenschatten: 0 0 5px 4px rgb(250, 108, 127);
}
>.blush::vor {
links: 20%;
}
>.blush::nach {
rechts: 20%;
}
>.Mund {
Position: absolut;
oben: 32 %;
Breite: 20px;
Höhe: 20px;
Hintergrund:
linearer Farbverlauf (135 Grad, RGB (255, 207, 0) 50 %,
rgb(224, 184, 2) 50%);
transformieren: drehen (45 Grad);
Randradius: 5 % 15 %;
}
> .feet::vorher,
.feet::nach{
Inhalt: '';
Position: absolut;
unten: -12px;
Breite: 10px;
Höhe: 15px;
Rand: 7px durchgezogenes RGB (71, 49, 20);
}
> .feet::vor{
links: 60px;
Randradius: 80 % 100 % 100 % 50 %;
transformieren: drehen (-10 Grad);
Rahmenfarbe: transparent transparent transparent rgb(71, 49, 20);
}
> .feet::nach{
rechts: 60px;
Randradius: 100 % 80 % 50 % 0 %;
transformieren: drehen (10 Grad);
Rahmenfarbe: transparent rgb(71, 49, 20) transparent transparent;
}
}
>.wappen {
Position: relativ;
oben: -17%;
Breite: 30px;
Höhe: 25px;
Hintergrund: rgb(233, 19, 19);
Randradius: 50 % 100 % 20 % 20 %;
}
>.crest::vorher,
.crest::nach {
Inhalt: '';
Position: absolut;
unten: 0;
Breite: 20px;
Hintergrund: rgb(233, 19, 19);
}
>.crest::vor {
links: -5px;
Höhe: 20px;
Randradius: 100 % 50 % 0 20 %;
}
>.crest::nach {
rechts: -15px;
Höhe: 15px;
Hintergrund: rgb(233, 19, 19);
Randradius: 20 % 200 % 20 % 30 %;
}
> .hand{
Position: relativ;
oben: -5%;
}
> .hand::vorher,
.hand::nach{
Inhalt: '';
Position: absolut;
}
> .hand::vor{
links: -135px;
Breite: 20px;
Höhe: 80px;
transformieren: drehen (15 Grad);
Hintergrund: rgb(250, 242, 242);
Randradius: 100 % 0 50 % 50 %;
}
> .hand::nach{
rechts: -110px;
Breite: 20px;
Höhe: 80px;
transformieren: drehen (-15 Grad);
Hintergrund: rgb(250,242,242);
Randradius: 50 % 100 % 50 % 50 %;
}
}
}Zusammenfassen Oben sehen Sie den reinen CSS3-Beispielcode für Haushühner, der vom Herausgeber eingeführt wurde. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox
>>: JavaScript entfernt unnötige Eigenschaften eines Objekts
Artikel empfehlen
Grafisches Tutorial zur Installation von Linux CentOS6.9 unter VMware
Als technischer Neuling zeichne ich den Vorgang d...
Beispiel für eine Methode zur Überprüfung des Status einer Linux-Firewall
So überprüfen Sie den Status der Linux-Firewall 1...
Lassen Sie sich die tiefe Kopie von js verstehen
Inhaltsverzeichnis js tiefe Kopie Methode der Dat...
Eine detaillierte Diskussion über MySQL-Deadlocks und -Logs
Vor kurzem sind mehrere Datenanomalien in MySQL o...
Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung
Aus historischen Gründen basiert die MySQL-Replik...
Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung
RPM-Paketverwaltung Ein Verpackungs- und Installa...
Detaillierte Erklärung der grundlegenden Verwendung des Linux-Debuggers GDB
Inhaltsverzeichnis 1. Übersicht 2. GDB-Debugging ...
Bringen Sie Ihnen bei, Dutzende von Zeilen JS zu verwenden, um coole interaktive Canvas-Effekte zu erzielen
Inhaltsverzeichnis 1. Zeichne einen Kreis 2. Krei...
vue $set implementiert die Zuweisung von Werten zu Array-Sammlungsobjekten
Vue $set Array-Sammlungsobjektzuweisung In der be...
Implementierung von MySQL Select in der Unterabfrageoptimierung
Die folgende Demonstration basiert auf MySQL Vers...
Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung
1. Absoluter Pfad Zunächst einmal bezieht sich de...
Drei Möglichkeiten zur Verwendung von CSS-Inlinestilen, eingebetteten Stilen und externen Referenzstilen
Ein einfaches Beispiel für die Verwendung der dre...
MySQL-Interviewfragen: So richten Sie Hash-Indizes ein
Zusätzlich zu den B-Tree-Indizes bietet MySQL auc...
61 Dinge, die jeder Webentwickler wissen sollte
Normalerweise müssen Sie die Reden aller Teilnehme...
Detailliertes Tutorial zur Installation von mysql5.7.21 unter Windows
In diesem Artikel finden Sie das Installations-Tu...