醜毛衣 CSS：Echo Base

醜毛衣日是十二月的第三個星期五。今年是12月20日。在國慶日曆頁面了解醜毛衣日..

在過去的幾年裡，我製作了樂高人物醜毛衣的 CSS 藝術版本。請參閱系列連結下的前一年。這件 2024 年醜毛衣以《帝國大反擊》中的萊婭和迴聲基地之戰為主題。

我從前幾年的毛衣模板開始。有一個基本的軀幹。這件毛衣的特色人物軀幹內側。角色 div 內部是反抗軍和帝國的戰鬥雙方。這些 div 裡面是戰鬥的車輛。

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

叛軍

叛軍一方擁有大砲。就形狀而言，它基本上是堆疊的矩形。砲塔包含砲蓋、主砲和底座。

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

帝國

影像中的帝國一側是 AT-AT 或帝國沃克。這是一輛可以行走的坦克車。它由頭、身體和腿組成。

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

頭部和身體部位是稍微移動了一點的長方形。腿部需要更多的工作。他們必須分成幾部分並輪換。首先，他們按大腿和小腿分組，然後按前腿和後腿配對。

<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>
  
  
  最終影像
</h2>

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

<h2>
  
  
  結論
</h2>

<p>這是一個挑戰。我了解到我應該在寫部落格之前刪除我的偽代碼。當我計劃這個時，我將腿標記為“腿”、“上部”、“彎曲”。 Lowerbent」、「lowerleg」和直。我沒有為所有這些課程開設課程。有些已經由其父課程涵蓋了。</p>

<p>感謝您的閱讀。  </p>


          </div>

            
  

            
        

以上是醜毛衣 CSS：Echo Base的詳細內容。更多資訊請關注PHP中文網其他相關文章！