Beispiel für die Verwendung von CSS3 zum Erstellen eines animierten Pikachu-Hintergrundbilds
|
Text OK, als nächstes ist es Zeit, die Renderings zu zeigen. Erst wenn Sie die Bilder gesehen haben, werden Sie daran interessiert sein, sie zu verstehen, sonst wird es langweilig und Sie werden kein Interesse daran haben, sie anzusehen.
PS: Da die Größe meiner Animation relativ groß ist (720 x 1280), habe ich sie um die Hälfte reduziert, um diese GIF-Animation aufzunehmen. Tatsächlich wäre es jedoch besser, es in der Originalgröße anzuzeigen. Dazu können Sie es von der Adresse herunterladen, die ich am Ende des Artikels angebe. Kommen wir zurück zum Thema. Eigentlich ist dieser Animationseffekt nicht schwer. Man sieht, dass der Aufbau sehr einfach und übersichtlich ist. Obwohl es einfach ist, ist die Wirkung dennoch sehr gut, weshalb ich bereit bin, es zu tun. Ok, da es so einfach ist, schauen wir uns die HTML-Struktur an, in der ich es implementiert habe:
<div Klasse="pikachu_container">
<div Klasse="Header">
<div Klasse="header_main">
<span class="Batterie"></span>
<span class="clock" id="nowTime">09:00</span>
</div>
</div>
<div Klasse="Zeit">
<h1>09:00</h1>
<p id="date">3. September 2015</p>
<p>Niedliches Pikachu-Handy-Hintergrundbild</p>
</div>
<div Klasse="Körper">
<div Klasse="Augen">
<div Klasse="leftEye"></div>
<div Klasse="rightEye"></div>
</div>
<div Klasse="Nase"></div>
<div Klasse="Wange">
<div Klasse="leftCheek"></div>
<div Klasse="rightCheek"></div>
</div>
<div Klasse="Mund">
<div Klasse="Mund_Haupt">
<div Klasse="Zunge"></div>
</div>
</div>
<div Klasse="Hände">
<div Klasse="linkeHand">
<div Klasse="leftHand_main">
<span></span>
<span></span>
<span></span>
<span></span>
<div Klasse="leftshadow"></div>
</div>
</div>
<div Klasse="rechteHand">
<div Klasse="rightHand_main">
<span></span>
<span></span>
<span></span>
<span></span>
<div Klasse="rightshadow"></div>
</div>
</div>
</div>
<div Klasse="Box">
<div Klasse="Hauptbox">
<div Klasse="box_circle"></div>
</div>
</div>
</div>
<p class="Autor">@JR</p>
</div>Der Grundaufbau ist relativ übersichtlich. Er gliedert sich in Batterie und Uhrzeit oben, Uhrzeit und Datum in der Mitte sowie Pikachus Körper. Pikachus Körper ist in Augen, Nase, Mund, Wangen, Hände und Ball unterteilt. Nachdem Sie die HTML-Struktur erstellt haben, können Sie den CSS-Stil entsprechend der Größe der einzelnen Bildteile schreiben, die Sie gemessen haben. Anschließend werde ich den CSS-Implementierungscode jedes Teils mit Ihnen teilen: Zuerst initialisieren
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Schriftfamilie: „Microsoft YaHei“;
Farbe: #fff;
}
.pikachu_container{
Breite: 720px;
Höhe: 1280px;
Hintergrund: RGB (251,205,60);
Position: relativ;
Überlauf: versteckt;
Rand: 0 automatisch;
}Top Akku und Laufzeit
.pikachu_container .header{
Breite: 100 %;
Höhe: 50px;
Zeilenhöhe: 50px;
Position: relativ;
oben: 0;
links: 0;
}
.pikachu_container .header .header_main{
Breite: 160px;
Höhe: 100 %;
Position: absolut;
rechts:0;
oben: 0;
Schriftgröße: 30px;
Überlauf: versteckt;
}
.header .header_main .battery{
Anzeige: Inline-Block;
Breite: 34px;
Höhe: 18px;
Rand: 3px durchgezogen #fff;
Rahmenradius: 5px;
Position: absolut;
oben: 50 %;
links: 23px;
Rand oben: -12px;
}
.header .header_main .battery:nach{
Inhalt:'';
Anzeige: Inline-Block;
Breite: 5px;
Höhe: 14px;
Hintergrund:#fff;
Position: absolut;
oben: 2px;
rechts: 2px;
-webkit-animation:Laden 2 s linear unendlich;
-moz-animation: Laden 2 s linear unendlich;
-o-Animation: Laden 2 s linear unendlich;
-ms-animation:Laden 2s linear unendlich;
Animation: 2 s lineares Laden, unendlich;
}
@-webkit-keyframes wird aufgeladen
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@-moz-keyframes wird aufgeladen
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@-o-keyframes wird aufgeladen{
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@-ms-keyframes wird aufgeladen{
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@keyframes wird aufgeladen{
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
.header .header_main .battery:vorher{
Inhalt:'';
Anzeige:Block;
Breite: 3px;
Höhe: 12px;
Hintergrund:#fff;
Rahmen oben links – Radius: 4px;
Rahmen unten links, Radius: 4px;
Position: absolut;
oben: 3px;
links: -6px;
}
.header .header_main .clock{
Position: absolut;
rechts: 14px;
oben: 0;
}Zentrales Datum und Uhrzeit
.pikachu_container .Zeit{
Breite: 100 %;
Höhe: 250px;
Position: relativ;
oben: 70px;
links: 0;
Textausrichtung: zentriert;
}
.pikachu_container .time h1{
Schriftgröße: 90px;
Buchstabenabstand: 8px;
Textschatten: -1px 2px 3px rgba (0,0,0,0,5);
}
.pikachu_container .time p:n-ter-Typ(1){
Schriftgröße: 30px;
Rand oben: 10px;
}
.pikachu_container .time p:n-ter-Typ(2){
Schriftgröße: 26px;
Rand oben: 8px;
-webkit-animation:textShake 1s unendlich;
-moz-animation:textShake 1s unendlich;
-o-animation:textShake 1s unendlich;
-ms-animation:textShake 1s unendlich;
Animation: Textshake, 1 s, unendlich;
}
@-webkit-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-webkit-transform:rotate(0deg) translate3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-moz-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-moz-transform:drehen(1Grad) übersetzen3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-moz-transform:drehen(0Grad) übersetzen3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-o-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-o-transform:drehen(1Grad) übersetzen3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-o-transform:drehen(0Grad) übersetzen3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-o-transform:drehen(-1Grad) übersetzen3d(-2px,2px,0);
}
}
@-ms-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-ms-transform:drehen(1deg) übersetzen3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-ms-transform:drehen(0Grad) übersetzen3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
transformieren: drehen (1 Grad) übersetzen3d (2px, -2px, 0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
transformieren: drehen (0 Grad) übersetzen3d (0px, 0px, 0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
transformieren: drehen (-1 Grad) übersetzen3d (-2px, 2px, 0);
}
}Pikachus Augen
.pikachu_container .body{
Breite: 100 %;
Höhe: 940px;
Position: relativ;
oben: 50px;
links: 0;
}
.Körper .Augen{
Position: relativ;
}
.body .eyes .linkesAuge, .body .eyes .rechtesAuge{
Breite: 85px;
Höhe: 85px;
Rand: 5px durchgezogen rgb(2,0,1);
Hintergrund: RGB (51,51,51);
Randradius: 50 %;
Position: absolut;
oben: 40px;
}
.body .eyes .linkesAuge{
links: 150px;
}
.body .eyes .rechtesAuge{
rechts: 150px;
}
.body .eyes .leftEye:nachher,.body .eyes .rightEye:nachher{
Inhalt:'';
Anzeige:Block;
Breite: 40px;
Höhe: 40px;
Hintergrund:#fff;
Rand: 5px durchgezogen rgb(2,0,1);
Randradius: 50 %;
Position: absolut;
oben: 2px;
links: 2px;
-webkit-animation:eyeMove 3s unendlich;
-moz-animation:eyeMove 3s unendlich;
-o-animation:eyeMove 3s unendlich;
-ms-animation:eyeMove 3s unendlich;
Animation: Augenbewegung 3 s unendlich;
}
@-webkit-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@-moz-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@-o-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@-ms-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}Pikachus Nase
.Körper .Nose{
Position: absolut;
Breite: 28px;
Höhe: 18px;
Hintergrund: RGB (51,51,51);
Rand: 4px durchgezogen rgb(2,0,1);
Rahmenradius: 36px/26px;
links: 50 %;
oben: 100px;
Rand links: -18px;
-webkit-animation:noseMove 3s unendlich;
-moz-animation:noseMove 3s unendlich;
-o-animation:noseMove 3s unendlich;
-ms-animation:noseMove 3s unendlich;
Animation: Nasenbewegung 3 s unendlich;
}
@-webkit-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@-moz-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@-o-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@-ms-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}Pikachus Wange
.Körper .Wange{
Position: relativ;
}
.body .cheek .leftCheek, .body .cheek .rightCheek{
Breite: 120px;
Höhe: 120px;
Rand: 5px durchgezogen rgb(2,0,1);
Hintergrund: RGB (231,74,57);
Randradius: 50 %;
Position: absolut;
oben: 170px;
-webkit-animation:cheekMove 3s unendlich;
-moz-animation:cheekMove 3s unendlich;
-o-animation:cheekMove 3s unendlich;
-ms-animation:cheekMove 3s unendlich;
Animation: Wangenbewegung 3 s unendlich;
}
@-webkit-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@-moz-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@-o-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@-ms-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
.body .cheek .leftCheek{
links: 60px;
}
.body .cheek .rightCheek{
rechts: 60px;
}Pikachus Mund
.Körper .Mund{
Position: relativ;
Breite: 180px;
Höhe: 220px;
links: 50 %;
oben: 180px;
Rand links: -90px;
}
.Körper .Mund .Mund_main{
Position: absolut;
links: 0;
oben: 0px;
Breite: 180px;
Höhe: 220px;
Hintergrund: RGB (132,37,41);
Rand: 4px durchgezogen rgb(2,0,1);
Rahmen oben rechts, Radius: 15px 15px;
Rahmen unten links – Radius: 250px 570px;
Rahmen unten rechts – Radius: 250px 590px;
Überlauf: versteckt;
-webkit-animation:mouthMove 3s unendlich;
-moz-animation:mouthMove 3s unendlich;
-o-animation:mouthMove 3s unendlich;
-ms-animation:mouthMove 3s unendlich;
Animation: Mundbewegung 3 s unendlich;
}
@-webkit-keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@-moz-keyframes Mundbewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@-o-keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@-ms-keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
.body .mouth:nach,.body .mouth:vor{
Inhalt:'';
Anzeige:Block;
Breite: 112px;
Höhe: 38px;
Hintergrund: RGB (251,205,60);
Rahmen unten: 4px durchgezogen rgb(2,0,1);
Position: absolut;
oben: -13px;
z-Index: 3;
}
.body .mouth:nach{
Rahmen links: 4px durchgezogen rgb(2,0,1);
Rahmen unten links – Radius: 340px 180px;
links: -30px;
-webkit-transform:rotate(-24 Grad);
-moz-transform:drehen(-24Grad);
-o-transform:drehen(-24Grad);
-ms-transform:drehen(-24Grad);
transformieren: drehen (-24 Grad);
}
.body .mouth:vor{
Rahmen rechts: 4px durchgezogen rgb(2,0,1);
Rahmen unten rechts – Radius: 340px 180px;
rechts: -30px;
-webkit-transform:drehen(24Grad);
-moz-transform:drehen(24Grad);
-o-transform:drehen(24Grad);
-ms-transform:drehen(24Grad);
transformieren: drehen (24 Grad);
}
.Körper .Mund .Zunge{
Breite: 200px;
Höhe: 200px;
Hintergrund: RGB (221,102,106);
Rand oben: 40px;
Rand links: -10px;
Rahmen oben links – Radius: 380px;
Rahmen oben rechts, Radius: 420px 380px;
Überlauf: versteckt;
}Über Pikachus Mund sollte man noch nachdenken und das Wichtigste ist, den Randradius zu verwenden, um diesen Effekt zu erzielen. Die Funktion für abgerundete Ecken ist ziemlich leistungsstark. Es hängt alles davon ab, wie Sie sie verwenden. Pikachus Ball
.Körper .Box{
Breite: 82px;
Höhe: 82px;
Rand: 3px durchgezogen #fff;
Randradius: 50 %;
Position: relativ;
Kastenschatten: 0 0 5px rgba (255,255,255,0,9);
links: 50 %;
oben: 320px;
Rand links: -44px;
-webkit-animation:box-rotate 4s ease-in-out unendlicher Wechsel;
-moz-animation:box-rotate 4s ease-in-out unendliche Abwechslung;
-o-Animation:Box-Rotate 4s, unendliche Abwechslung beim Rein-Raus-Gehen;
-ms-animation:box-rotate 4s ease-in-out unendlicher Wechsel;
Animation: Box-Rotation, 4 s, unendliches abwechselndes Ein- und Aussteigen;
}
@-webkit-keyframes box-rotate{
0 %, 90 %, 100 % {
-webkit-transform:drehen(0Grad);
}
40 %, 50 % {
-webkit-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@-moz-keyframes box-rotate{
0 %, 90 %, 100 % {
-moz-transform:drehen(0Grad);
}
40 %, 50 % {
-moz-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@-o-keyframes box-rotate{
0 %, 90 %, 100 % {
-o-transform:drehen(0Grad);
}
40 %, 50 % {
-o-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@-ms-keyframes box-rotate{
0 %, 90 %, 100 % {
-ms-transform:drehen(0Grad);
}
40 %, 50 % {
-ms-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@keyframes box-rotate{
0 %, 90 %, 100 % {
transformieren: drehen (0 Grad);
}
40 %, 50 % {
transformieren: drehen (360 Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
.body .box .box_main{
Breite: 80px;
Höhe: 80px;
Randradius: 50 %;
Hintergrund: RGB (236,2,3);
Rand: 1px durchgezogen #333;
Position: absolut;
oben: 0;
links: 0;
Überlauf: versteckt;
}
.body .box .box_main:vor{
Inhalt:'';
Anzeige:Block;
Breite: 80px;
Höhe: 40px;
Hintergrund:#fff;
Position: absolut;
unten: 0;
links: 0;
}
.body .box .box_main:nach{
Inhalt:'';
Anzeige:Block;
Breite: 80px;
Höhe: 12px;
Hintergrund: RGB (59,53,67);
Position: absolut;
oben: 50 %;
links: 0;
Rand oben: -6px;
}
.body .box .box_main .box_circle{
Breite: 24px;
Höhe: 24px;
Rand: 8px durchgezogenes RGB (59,53,67);
Randradius: 50 %;
Hintergrund:#fff;
Position: absolut;
links: 50 %;
oben: 50 %;
Rand links: -20px;
Rand oben: -20px;
z-Index: 5;
}
.body .box .box_main .box_circle:nach{
Inhalt:'';
Anzeige:Block;
Breite: 16px;
Höhe: 16px;
Rand: 1px durchgezogen rgb(59,53,67);
Randradius: 50 %;
Position: absolut;
oben: 50 %;
links: 50 %;
Rand links: -9px;
Rand oben: -9px;
-webkit-animation:bg_change 4s unendlich;
-moz-animation:bg_change 4s unendlich;
-o-animation:bg_change 4s unendlich;
-ms-animation:bg_change 4s unendlich;
Animation: bg_change 4s unendlich;
}
@-webkit-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@-moz-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@-o-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@-ms-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}PS: Was die Hände betrifft, gibt es im Voraus viele Codes und der Artikel ist schon etwas lang, deshalb werde ich ihn nicht hochladen. Wenn Sie es benötigen, können Sie es von meinem GitHub herunterladen. In diesem Fall die GitHub-Download-Adresse: https://github.com/JR93/pikachu Originallink: https://www.cnblogs.com/jr1993/p/4779678.html Oben sind die Einzelheiten eines Beispiels für die Verwendung von CSS3 zum Erstellen eines animierten Pikachu-Hintergrundbilds aufgeführt. Weitere Informationen zur Verwendung von CSS3 zum Erstellen eines Pikachu-Hintergrundbilds finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Tutorial zur Verwendung des Hyperlink-Tags in HTML
>>: Beispiele für Clearfix und Clear
Artikel empfehlen
Detaillierte Erklärung zum Anzeigen der Anzahl der MySQL-Server-Threads
In diesem Artikel wird anhand eines Beispiels bes...
Vue implementiert die Abfrage von Startzeit und Endzeitbereich
In diesem Artikel erfahren Sie, wie Sie den Start...
Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt
Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...
WeChat Mini-Programm: Position des Videofeuers zufällig
In diesem Artikel wird der spezifische Code zur z...
Ein Beispiel für die Verwendung von Dapr zur Vereinfachung von Microservices von Grund auf
Inhaltsverzeichnis Vorwort 1. Docker installieren...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Detaillierte Erklärung zur Einstellung des Hintergrundbild-Attributs in HTML
Bei Bildern denken wir zuerst an das Hintergrundb...
Versprechenskapselung wx.request-Methode
Im vorherigen Artikel wurde die Implementierungsm...
So erstellen Sie eine Swap-Partitionsdatei in Linux
Einführung in Swap Swap (d. h. Swap-Partition) in...
Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port
Apache: Virtuellen Host basierend auf Port erstel...
Docker Link realisiert die Containerverbindung
Inhaltsverzeichnis 1.1. Netzwerkzugriff zwischen ...
Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs
Bei der Frontend-Entwicklung stehen wir in direkt...
Der JavaScript-Artikel zeigt Ihnen, wie Sie mit Webformularen spielen
1. Einleitung Zuvor haben wir die schnelle Entwic...
Lösung für die Nginx-Installation ohne Generierung des sbin-Verzeichnisses
Fehlerbeschreibung: 1. Nach der Installation von ...
Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste
Dieses Projekt teilt den spezifischen Code von Vu...