CSS丑陋毛衣：Thanos
#css #教程 #前端 #艺术

这是CSS丑陋的毛衣季节。在过去的两年中，我是根据丑陋的毛衣制作的CSS项目。灵感来自一个乐高星球大战的降临日历，该日历中有一件毛衣的缩影。从那以后，我做了《星球大战》，《口袋妖怪》和《万圣节》的毛衣。

今年有一个Guardians of Galaxy Lego Advent日历。一个人物之一是星云穿着一件丑陋的毛茸茸的毛衣。这是今天帖子的灵感。

LEGO Blue alien woman wearing a Christmas sweater

我修改了以前版本的毛衣。为了制作毛衣的衣领和底部，我为每个毛衣做了一个div，并以9.09％的宽度插入了11个Divs。我给了这些divs一类“针迹”。我使用了border: 2px dashed black;，彼此相邻的部分均加倍且太厚，因此我将border-Left:和border-Right:降低到1px。

        <div class="collar">
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
            <div class="stitch"></div>
        </div>




.collar, .base {
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
  align-items: center; 
  position: relative;
}


.stitch {
    background-color: var(--sweaterGold);
    border: 2px dashed black;
    border-right: 1px dashed black;
    border-left: 1px dashed black;
    height: 34px;
    width: 9.09%;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center; 
}

graphic to simulate a sweater. The background is blue, at top and bottom are rows of gold boxes. each box has a colored oval.There are row of black triangles.

我在每个针迹div中添加了无限石。石头的模式为五个相等大小的石头，中间有更大的石头。然后是前五种颜色的重复。

        <div class="collar">
            <div class="stitch"><div class="stone stoneAmber"></div></div>
            <div class="stitch"><div class="stone stoneRed"></div></div>
            <div class="stitch"><div class="stone stoneBlue"></div></div>
            <div class="stitch"><div class="stone stonePurple"></div></div>
            <div class="stitch"><div class="stone stoneGreen"></div></div>
            <div class="stitch"><div class="stone stoneYellow"></div></div>

            <div class="stitch"><div class="stone stoneAmber"></div></div>
            <div class="stitch"><div class="stone stoneRed"></div></div>
            <div class="stitch"><div class="stone stoneBlue"></div></div>
            <div class="stitch"><div class="stone stonePurple"></div></div>
            <div class="stitch"><div class="stone stoneGreen"></div></div>
        </div>

毛衣的内行是一系列黑色三角形。它们是由一个有三个透明边界的正方形制成 


.blackRow {
    border-top: 30px solid black;
    border-bottom: 30px solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center; 

}

.blackRow_bottom {
    border-top: 30px solid transparent;
    border-bottom: 30px solid black;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;

}

背景雪是[Carlos Escalera] [雪效应]的提示。我考虑过自己试图自己编码雪，但是这个背景图像提示是直接的。

那是现在的整体毛衣，是时候添加我们的小朋友了。

我在三角形行之间放置了一个字符div。角色div内部是特定字符的div。对于这个项目，它有一类Thanos。


.thanos {
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}


       <div class="character">
        <div class="thanos"></div>
       </div>

我的头。

头部是一个正方形，矩形添加到顶部和底部，用于微型螺柱或柱子。然后我在头部div中建立了脸。

Blue background with gold rows. in the center is a purple square.

       <div class="character">
          <div class="thanos">   
         <div class="top">
            <div class="headStud"></div>
         </div>
         <div class="midrow">
          <div class="head"></div>
          <div class="neckRow">
            <div class="neck"></div>
          </div>
         </div>             
       </div>

脖子和头囊divs的形状和大小相同。它们只有背景颜色不同。

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;

    margin-top: 0px;
}


.thanos {
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}




.head {
    background-color: var(--thanosSkin);
    height:200px;
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
    border: 6px solid black;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;

}

.neck{
    height: 20px;
    width: 60px;
    background-color: var(--sweaterGold);
    border: 6px solid black;
    border-top: 2px solid black;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    margin-top: 2px;

    position: absolute;
}

thanos的脸是由简单的形状制成的。眉头和下巴分别是水平和垂直线。眼睛是正方形，每个方块都涂在每个顶部。
嘴和牙齿是修饰的矩形。

purple Thanos head.