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
Lassen Sie den IE CSS3 Media Query unterstützen, um responsives Webdesign zu erreichen
Die heutigen Bildschirmauflösungen reichen von 32...
Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?
Viele Webdesigner sind beim Entwurf des Webseitenl...
Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen
0. Neuer Betrieb: mkdir abc #Erstelle einen neuen...
Schritte zum Anpassen des Symbols in Vue
ant-design-vue passt die Verwendung von Ali Iconf...
So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus
Der spezifische Code lautet wie folgt: <Stil&g...
Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle
Temporäre Tabellen und Speichertabellen Eine Spei...
Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)
So erstellen Sie eine virtuelle Maschine auf VMwa...
Erste Schritte mit Nginx Reverse Proxy
Inhaltsverzeichnis Überblick Die Rolle des Revers...
CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung
So verwenden Sie CSS, um die Bogenbewegung von El...
So fragen Sie die neueste Transaktions-ID in MySQL ab
Vorne geschrieben: Manchmal müssen Sie möglicherw...
Beheben Sie das Problem, dass die MySQL-Datenbank unerwartet abstürzt, wodurch die Tabellendatendatei beschädigt wird und nicht gestartet werden kann
Problem: Die MySQL-Datenbank ist unerwartet abges...
Vue + Spring Boot realisiert die Bestätigungscodefunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung der Bedeutung von N und M im MySQL-Datentyp DECIMAL(N,M)
Ein Kollege fragte mich, was N und M im MySQL-Dat...
Interpretation des Moduls zum Lastenausgleich mit nginx
Inhaltsverzeichnis Zwei Module zur Verwendung von...
Vue setzt die Daten auf ihren ursprünglichen Zustand zurück
In einigen Fällen müssen die Daten in den Daten w...