丑毛衣 CSS：Lars Homestead

这是塔图因的拉尔斯家园。欧文·拉斯 (Owen Lars)、贝鲁·拉斯 (Beru Lars) 以及卢克·天行者 (Luke Skywalker) 的家。

在过去的几年里，我制作了乐高人物丑毛衣的 CSS 艺术版本。请参阅系列链接下的前一年。这款 2024 年丑毛衣以卢克和他在原版《星球大战》电影中长大的家园为主题。

我从前几年的毛衣模板开始。有一个基本的躯干。这件毛衣的特色人物躯干内侧。 InnerSweater div 内是 Lars 家的各个部分。

<div>





<pre class="brush:php;toolbar:false">.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;允许家园的各个部分在屏幕上排列。

房子

房子及其各个部分都是经过修改的矩形。通过调整边框半径，矩形的顶部有曲线。底部边框变得透明，因此它们不会出现在屏幕上。

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

水分蒸发器

水分蒸发器是一系列线条和盒子。

        <div>





<pre class="brush:php;toolbar:false">.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;
}

双太阳

太阳是更多的矩形，彼此堆叠并旋转。

<div>





<pre class="brush:php;toolbar:false">.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;
}

包起来

这比 Echo 基础毛衣更容易制作。弄清楚 AT-At 腿花了更多时间。一旦我开始，构建速度就快得多。

以上是丑毛衣 CSS：Lars Homestead的详细内容。更多信息请关注PHP中文网其他相关文章！