CSS Sweater Hodoh: Pangkalan Gema

Hari baju sejuk hodoh ialah Jumaat ketiga bulan Disember. Tahun ini iaitu 20 Disember. Ketahui tentang hari baju sejuk Hodoh pada halaman kalendar Hari Kebangsaan..

Sejak beberapa tahun kebelakangan ini saya telah membuat versi seni CSS bagi baju sejuk Lego Figure. Lihat tahun sebelumnya di bawah pautan siri. Sweater Ugly 2024 ini menampilkan Leia dan pertempuran pangkalan Echo dari The Empire Strikes Back.

Saya bermula dengan templat sweater saya dari tahun-tahun sebelumnya. Terdapat batang tubuh asas. Bahagian dalam badan dalam watak yang diketengahkan untuk sweater ini. Di dalam div watak adalah dua belah pihak pertempuran Pemberontak dan Empayar. Di dalam div tersebut terdapat kenderaan pertempuran.

<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;
}

Pemberontak

Pihak pemberontak menampilkan Meriam. Setakat bentuknya, ia pada dasarnya menyusun segi empat tepat. Turret mengandungi penutup meriam, pistol dan pangkalan.

<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;
}

Empayar

Imej bahagian Empire ialah AT-AT atau Imperial Walker. Ia adalah kereta kebal yang berjalan. Ia diperbuat daripada kepala, badan dan kaki.

<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;
}

Bahagian kepala dan badan berbentuk segi empat tepat digerakkan sedikit. Kaki adalah apa yang mengambil lebih banyak kerja. Mereka terpaksa dikumpulkan dalam bahagian dan diputar. Mula-mula mereka bekerja secara berkumpulan mengikut kaki atas dan bawah, yang dipasangkan dengan kaki depan dan belakang.

<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>
  
  
  Imej Akhir
</h2>

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

<h2>
  
  
  Kesimpulan
</h2>

<p>Yang ini satu cabaran. Saya mengetahui bahawa saya harus mengalih keluar kod pseudo saya sebelum saya memblog. Apabila saya merancang ini, saya menandakan kaki adalah "kaki", "atas", "bengkok". Lowerbent", "lowerleg" dan straight. Saya tidak membuat kelas untuk semua itu. Ada yang telah dilindungi oleh kelas induk mereka.</p>

<p>Terima kasih kerana membaca.  </p>


          

            
  

            
        

Atas ialah kandungan terperinci CSS Sweater Hodoh: Pangkalan Gema. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!