丑毛衣日是十二月的第三个星期五。今年是12月20日。在国庆日历页面了解丑毛衣日..
在过去的几年里，我制作了乐高人物丑毛衣的 css 艺术版本。请参阅系列链接下的前一年。这件 2024 年丑毛衣以《帝国反击战》中的莱娅和回声基地之战为主题。
我从前几年的毛衣模板开始。有一个基本的躯干。这件毛衣的特色人物躯干内侧。角色 div 内是叛军和帝国的战斗双方。这些 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;}
叛军
叛军一方拥有大炮。就形状而言，它基本上是堆叠的矩形。炮塔包含炮盖、主炮和底座。
.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>.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;}头部和身体部分是稍微移动了一点的矩形。腿部需要更多的工作。他们必须分成几部分并轮换。首先，他们按大腿和小腿分组，然后按前腿和后腿配对。
网易人工智能
网易数帆多媒体智能生产力平台
206 查看详情
腿都是从腿类开始的，并且形状相同。一些大腿的另一类称为弯曲。这使用transform:rotate来改变腿的形状。如果一条腿弯曲，那么腿的下部就会获得下弯曲类，这只会使腿的该部分向前移动。
.legs{ width: 10px; height: 50px; background: var(--sweaterblue); border: 2px solid white;}.bent{ transform: rotate(45deg); height: 40px;}.lowerbent{ margin-left: -10px;}最终图像
结论
这是一个挑战。我了解到我应该在写博客之前删除我的伪代码。当我计划这个时，我将腿标记为“腿”、“上部”、“弯曲”。 lowerbent”、“lowerleg”和直。我没有为所有这些课程开设课程。有些已经由其父课程涵盖了。
立即学习“前端免费学习笔记（深入）”；
感谢您的阅读。
以上就是丑毛衣 CSS：Echo Base的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1150863.html赞 (0)打赏微信扫一扫
支付宝扫一扫
微信扫一扫 
支付宝扫一扫 
