醜毛衣 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中文網其他相關文章！