アグリーセーターCSS：エコーベース

アグリーセーターの日は12月の第3金曜日です。今年は12月20日です。建国記念日のカレンダー ページでアグリー セーターの日についてご覧ください。

ここ数年、私はレゴ フィギュアの醜いセーターの CSS アート バージョンを作成してきました。シリーズのリンクの下にある前年を参照してください。この 2024 年のアグリー セーターには、『帝国の逆襲』のレイアとエコー基地の戦いが描かれています。

私は前年のセーターのテンプレートから始めました。基本的な胴体があります。このセーターの注目のキャラクターの胴体の内側。キャラクター div 内には、反乱軍と帝国の戦いの 2 つの側面があります。これらの div の中には戦闘の車両があります。

<div>





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





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





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



<p>The legs all start with the leg class and are the same shape. Some of the upper legs get another class called bent. This uses transform: rotate to change the leg shape. If a leg is bent then the lower part of the leg gets the lowerbent class, which just moves that part of the leg forward.<br>
</p>

<pre class="brush:php;toolbar:false">.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

.lowerbent{
    margin-left: -10px;
}

<div>



<h2>
  
  
  最終イメージ
</h2>

<p><img src="https://img.php.cn/upload/article/000/000/000/173526811541121.jpg" alt="Ugly Sweater CSS: Echo Base"></p>

<h2>
  
  
  結論
</h2>

<p>これは挑戦でした。ブログを書く前に疑似コードを削除する必要があることを学びました。これを計画したとき、脚に「脚」、「上部」、「曲がっている」とマークを付けました。 「ローワーベント」、「ローレッグ」、およびストレート。これらすべてのクラスを作成したわけではありません。一部はすでに親クラスでカバーされています。</p>

<p>読んでいただきありがとうございます。  </p>


          </div>

            
  

            
        

以上がアグリーセーターCSS：エコーベースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。