Ugly Sweater CSS: Echo Base

Der Tag des hässlichen Pullovers ist der dritte Freitag im Dezember. Dieses Jahr ist das der 20. Dezember. Erfahren Sie mehr über den Tag des hässlichen Pullovers auf der Kalenderseite zum Nationalfeiertag.

In den letzten Jahren habe ich CSS-Kunstversionen der hässlichen Pullover der LEGO-Figur erstellt. Siehe das Vorjahr unter den Serienlinks. Dieser 2024 Ugly Sweater zeigt Leia und die Basis der Schlacht von Echo aus „Das Imperium schlägt zurück“.

Ich habe mit meiner Pullover-Vorlage aus den Vorjahren begonnen. Es gibt einen einfachen Oberkörper. Innentorso in der für diesen Pullover vorgestellten Figur. Innerhalb der Charakter-Div befinden sich die beiden Seiten der Schlacht: Rebellen und Imperium. In diesen Divs befinden sich die Fahrzeuge der Schlacht.

<div>





<pre class="brush:php;toolbar:false">.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}

.ground{
    width: 100%;
    height: 2px;
    background: white;
}


.rebels {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.empire {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
}

Rebellen

Die Rebellenseite verfügt über eine Kanone. Was die Form betrifft, handelt es sich im Wesentlichen um das Stapeln von Rechtecken. Der Turm enthält den Kanonendeckel, das Geschütz und den Sockel.

<div>





<pre class="brush:php;toolbar:false">.turret{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    margin-right: 40px;
    margin-bottom: -280px;

}

.cannon_lid{
    width: 80px;
    height: 10px;
    border:4px white solid;
    margin-bottom: 32px;
    margin-left: 11px;
        position: absolute;
        z-index: 1;
        background: var(--sweaterblue);
}

.gun{
    width: 60px;
    height: 5px;
    background: white;
    position: absolute;
    margin-bottom: 32px;
    margin-left: 125px;
}

.turret_base{
    width: 30px;
    height: 40px;
    border: 4px white solid;
    border-top: 4px white dotted;
    position: absolute;
    margin-top: 40px;
}

Reich

Die Empire-Seite des Bildes ist ein AT-AT oder Imperial Walker. Es ist ein Panzer, der läuft. Es bestand aus Kopf, Körper und Beinen.

<div>





<pre class="brush:php;toolbar:false">.at-at{
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative; 
    background: var(--sweaterblue);
    margin-top: 145px;
}

.at-at_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    position: absolute;
}

Die Kopf- und Körperteile sind etwas verschobene Rechtecke. Die Beine waren es, die mehr Arbeit erforderten. Sie mussten in Teilen gruppiert und gedreht werden. Zuerst arbeiten sie gruppiert nach Ober- und Unterschenkeln, dann gepaart nach Vorder- und Hinterbeinen.

<div>



<p>The legs all start with the leg class and are the same shape. Some of the upper legs get another class called bent. This uses transform: rotate to change the leg shape. If a leg is bent then the lower part of the leg gets the lowerbent class, which just moves that part of the leg forward.<br>
</p>

<pre class="brush:php;toolbar:false">.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

.lowerbent{
    margin-left: -10px;
}

<div>



<h2>
  
  
  Endgültiges Bild
</h2>

<p><img src="https://img.php.cn/upload/article/000/000/000/173526811541121.jpg" alt="Ugly Sweater CSS: Echo Base"></p>

<h2>
  
  
  Abschluss
</h2>

<p>Das war eine Herausforderung. Ich habe gelernt, dass ich meinen Pseudocode entfernen sollte, bevor ich blogge. Als ich das geplant habe, habe ich die Beine als „Beine“, „oben“ und „gebogen“ markiert. „Lowerbent“, „lowerleg“ und gerade. Ich habe nicht für alle diese Kurse erstellt. Einige wurden bereits von der übergeordneten Klasse abgedeckt.</p>

<p>Vielen Dank fürs Lesen.  </p>


          

            
  

            
        

Das obige ist der detaillierte Inhalt vonUgly Sweater CSS: Echo Base. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!