уродливый день свитера - третья пятница декабря. В этом году 20 декабря. Узнайте о уродливом дне свитера на странице календаря национального дня ..

в течение последних нескольких лет я сделал CSS Art версии LEGO Figure Ugly Swaters. Смотрите предыдущий год по ссылкам серии. Этот уродливый свитер 2024 года включает в себя Leia, а битва при Эхо из Империи ударяется назад.

я начал с своего шаблона свитера с предыдущих лет. Там базовый торс. Внутри туловища в представленном персонаже для этого свитера. Внутри персонажа Div находятся две стороны боевых повстанцев и империи. Внутри этих DOV находятся транспортные средства битвы.
]

.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{
    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;
}
]



 голова и части тела прямоугольны перемещаются немного. Ноги - это то, что заняло больше работы. Они должны были быть сгруппированы по частям и вращались. Сначала они работают сгруппированы по верхним и нижним ногам, в паре на передних и задних ногах. 
]
]





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.



.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

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

]





]




]
  
  
  Окончательное изображение
]

  

]
  
  
  Заключение
]

 это было вызовом. Я узнал, что я должен удалить свой псевдо -код, прежде чем я блог. Когда я запланировал это, я помеченные ноги - «ноги», «верхняя», «согнутая». Lowerbent "," LowerLeg "и Pright. Я не проводил занятия для всех них. Некоторые уже были покрыты их родительским классом.

 спасибо за чтение.  
]


          
]

            
  

            
        
]