丑毛衣日是十二月的第三个星期五。今年是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; }
头部和身体部分是稍微移动了一点的矩形。腿部需要更多的工作。他们必须分成几部分并轮换。首先，他们按大腿和小腿分组，然后按前腿和后腿配对。
<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”和直。我没有为所有这些课程开设课程。有些已经由其父课程涵盖了。
立即学习“前端免费学习笔记（深入）”；
感谢您的阅读。
