塔图因的拉尔斯农场,欧文和贝鲁·拉尔斯以及卢克·天行者的家,以乐高积木人物丑毛衣css艺术形式呈现。延续往年传统,2024年版丑毛衣以卢克和他在原版《星球大战》电影中的故乡为主题。

本作品基于往年毛衣模板,包含基本的躯干结构。毛衣内侧以人物躯干为特色,innersweater div中包含拉尔斯农场的各个部分。

.innersweater { width: 900px; height: 100%; display: flex; justify-content: center; align-items: center; gap: 50px; column-gap: 40px;}.wrapper { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 25px;}
flex-direction: column; 属性使农场各部分在屏幕上垂直排列。
立即学习“前端免费学习笔记(深入)”;
青泥AI
青泥学术AI写作辅助平台
302 查看详情
农场建筑
房屋及其组成部分均由修改后的矩形构成。通过调整边框半径,顶部呈现曲线效果。底部边框设置为透明,使其在屏幕上不可见。
.house { width: 230px; height: 170px; background: var(--sweatergreen); border: 8px white double; border-top-right-radius: 40%; border-top-left-radius: 40%; margin-right: 580px; margin-top: 235px; position: absolute; border-bottom-color: transparent; display: flex; overflow: visible; justify-content: space-around;}.houseback { width: 30px; height: 85px; background: var(--sweatergreen); border: 4px white solid; border-bottom-color: transparent; border-top-left-radius: 40%; margin-left: -21px; margin-top: 85px; position: relative;}.housefront { width: 120px; height: 110px; background: var(--sweatergreen); border: 4px white double; border-top-right-radius: 40%; border-top-left-radius: 40%; margin-left: 166px; margin-top: 60px; position: relative; border-bottom-color: transparent; display: flex; justify-content: center; align-content: flex-end; overflow: hidden;}.door { width: 50px; height: 100px; background-color: var(--sweaterdarkred); margin-top: 24px; border-top-right-radius: 10%; border-top-left-radius: 10%;}
水分蒸发器
水分蒸发器由一系列线条和矩形构成。
.post { width: 40px; height: 100px; background: var(--sweatergreen); border: 4px white solid; border-bottom-color: transparent; position: relative; display: flex; justify-content: center;}.line { width: 6px; height: 100px; background: white; position: relative;}
双太阳
太阳由多个堆叠并旋转的矩形构成。
.sun1 { width: 50px; height: 100px; background: var(--SweaterDarkRed); position: absolute;}.sun1_mid { width: 70px; height: 80px; background: var(--SweaterDarkRed); position: absolute;}.sunRotate { transform: rotate(90deg); width: 60px;}
总结
相较于之前的基础毛衣,这个作品制作相对简单。AT-AT步行器的制作耗时较长,但整体构建速度较快。
以上就是丑毛衣 CSS:Lars Homestead的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1149913.html
微信扫一扫
支付宝扫一扫