丑毛衣 CSS：Echo Base

丑毛衣日是十二月的第三个星期五。今年是12月20日。在国庆日历页面了解丑毛衣日..

在过去的几年里，我制作了乐高人物丑毛衣的 css 艺术版本。请参阅系列链接下的前一年。这件 2024 年丑毛衣以《帝国反击战》中的莱娅和回声基地之战为主题。

我从前几年的毛衣模板开始。有一个基本的躯干。这件毛衣的特色人物躯干内侧。角色 div 内是叛军和帝国的战斗双方。这些 div 里面是战斗的车辆。

<div class="torso"> 
   <div class="character">
     <div class="rebels"></div> 
     <div class="empire"></div> 
   </div character>
</div>

.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 class="turret">
    <div class="cannon_lid"></div>
    <div class="gun"></div>
    <div class="turret_base"></div>
</div>

.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 class="empire">
    <div class="at-at">
        <div class="at-at_main">
            <div class="at-at_head"></div>
            <div class="at-at_neck"></div>
            <div class="at-at_body"></div>
            <div class="at-at_hanger"></div>
        </div>
         </div>

    <div class="legs_group">/div>
</div>

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

头部和身体部分是稍微移动了一点的矩形。腿部需要更多的工作。他们必须分成几部分并轮换。首先，他们按大腿和小腿分组，然后按前腿和后腿配对。

ModelGate

一站式AI模型管理与调用工具

下载

<div class="legs_group">
    <div class="upper">
        <div class="front"></div>
    <div class="back"></div>
    </div>

    <div class="lower">
        <div class="front"></div>
        <div class="back"></div>
    </div>

 </div> 

腿都是从腿类开始的，并且形状相同。一些大腿的另一类称为弯曲。这使用transform:rotate来改变腿的形状。如果一条腿弯曲，那么腿的下部就会获得下弯曲类，这只会使腿的该部分向前移动。

.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

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

<div class="legs_group">
    <div class="upper">
        <div class="front">
        <div class="legs bent"></div>
        <div class="legs"></div>
    </div>
    <div class="back">
        <div class="legs bent"></div>
        <div class="legs"></div>
    </div>
    </div>

    <div class="lower">
        <div class="front">
        <div class="legs lowerbent"></div>
        <div class="legs"></div>
        </div>
        <div class="back">
        <div class="legs lowerbent"></div>
        <div class="legs"></div>
        </div>
    </div>

 </div>

最终图像

结论

这是一个挑战。我了解到我应该在写博客之前删除我的伪代码。当我计划这个时，我将腿标记为“腿”、“上部”、“弯曲”。 lowerbent”、“lowerleg”和直。我没有为所有这些课程开设课程。有些已经由其父课程涵盖了。

立即学习“前端免费学习笔记（深入）”；

感谢您的阅读。