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
Über das Problem, dass nach der VMware-Installation keine virtuelle Netzwerkkarte vorhanden ist
1 Problembeschreibung: 1.1 Wenn VMware zum ersten...
Vier Modi zum Öffnen und Schließen von Oracle
>1 Starten Sie die Datenbank Geben Sie im cmd-...
Methode und Optimierungsprinzip für langsame MySQL-Abfragen
1. Zum Vergleich der Datumsgröße muss das an XML ...
Tutorial zur mobilen Entwicklung: Zusammenfassung der Pixelanzeigeprobleme
Vorwort Ich bin davon überzeugt, dass bei der Ent...
Lösung für „Keine solche Datei oder kein solches Verzeichnis“ im Gebietsschema nach der Installation von glibc-2.14 in CentOS6.5
Inhaltsverzeichnis 1. In die Grube fallen 2. Verg...
CSS3 realisiert den roten Umschlag-Shaking-Effekt
Es besteht die Anforderung, den Schütteleffekt de...
Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren
1. MySQL entfernen a. sudo apt-get autoremove --p...
Vollständige Schritte zum Bereitstellen von Confluence mit Docker
Confluence ist kostenpflichtig, kann aber für die...
Codeblock-Hervorhebung kann kopiert und angezeigt werden js Plugin highlight.js + clipboard.js Integration
Vor allem aus zwei Gründen: 1. Hervorhebung/Zeile...
Detaillierte Schritte zur Installation des 64-Bit-Ubuntu-Systems und des Docker-Tools auf Raspberry Pi 3B+
Wenn Sie einige 64-Bit-Anwendungen (wie 64-Bit-JD...
Diese Dinge wissen Sie vielleicht nicht über die automatische ID-Inkrementierung in MySQL
Einführung: Wenn wir MySQL zum Erstellen einer Ta...
vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen
In der neuesten Version von WIN10 hat Microsoft e...
So führen Sie in 1 Minute ein reibungsloses Upgrade und Rollback der Nginx-Version durch
Lassen Sie uns heute über eine Situation sprechen...
Bild-Scrolling-Effekt mit CSS3 erstellt
Ergebnisse erzielenImplementierungscode html <...
Detailliertes Tutorial zur Docker-Compose-Bereitstellung und Konfiguration von Jenkins
Docker-Compose-Bereitstellungskonfiguration Jenki...