CSSハロウィン:Docker香港?

18333 ワード
css テキストリンク
昨年、私はCSSを使っていました.それから、クリスマスのために、私は作りました.今は10月の私は醜いハロウィーンのセーターのために一緒に入れている.
去年からメインセーター本体を再利用しています.しかし、ハロウィーンのテーマに合わせて色を変更する.

これは私たちが最後にセーターを残した方法です.バットと目でいっぱいの白い箱の行で黒い背景.その下に交互の白とオレンジのボックスの行.その後、黒の大きな開いた領域は、逆順序で行が続きます.

キャラクターを加える
<div class="torso"> 
.
.
.
   <div class="character">
     <div class="kong"></div>   
   </div character>
.
.
.
</div<

/* CHARACTER    //////////////// */

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
    margin-left: -60px;
}

.kong {
    background-color: #686565;
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: visible;
    flex-direction: column;
    border-top-right-radius: 40%;
    border-top-left-radius: 45%;
    border-bottom-right-radius: 48%;
    border-bottom-left-radius: 48%; 
    border: 6px dashed #686565;
    margin-bottom: 80px;
    justify-content: space-between;
}
これはキングコングの頭になる基本的な円を与えます.

.eyes_pair {
    width: 140px;
    height: 90px;
    border-radius: 20%;
    background: #A9A9A9;
    margin-left: -190px;
    margin-top: -121px; 
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    overflow: overlay;
    z-index: 1;
    border: 4px solid #A9A9A9;
    justify-content: space-between;

}
.beard {
    border-top:100px #686565;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent; 
    margin-top: 156px;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}

.lines {
    position: relative;
    margin:0 auto;
    margin-top: -170px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-top: 67px solid #000;
    height: 0;
    width: 0;
}
.lines:before {
    border-top: 66px solid #a9a9a9;
    border-left: 66px solid rgba(0, 0, 0, 0);
    border-right: 66px solid rgba(0, 0, 0, 0);
    content: "";
    left: -66px;
    margin-top: -80px;
    position: absolute;
}
この長方形border-radius: 20%. 目の背景になります.ひげの三角形は、境界線を使用して長方形を作ることによって作られます.注意してください背景色だけで境界色です.

.Eyes {
    background-color: black;
    height: 54px;
    width: 54px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    border-top-right-radius: 13%;
    border-top-left-radius: 20%;
    border-bottom-right-radius: -38%;
}


.pupil {
    background-color: white;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}

最後に口と鼻を加えます.それらは私が使用したのと同じHTMLです.鼻は黒い円の内側にちょうど2つの灰色の円です.
<div class="nostrils">
  <div class="nostrilsInside"></div>
</div>
<div class="nostrils">
   <div class="nostrilsInside"></div>
</div>

.nostrils {
    width: 25px;
    height: 25px;
    background-color: #A9A9A9;
    border: solid 2px black;
    border-radius: 50%;
    margin-top: -90px;
    margin-left: -63px;
    z-index: 7;
    display: flex;
    justify-content: center;
}

.nostrilsInside {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    margin-top: 3px;
    z-index: 4;
}

.fangs {
    width: 25px;
    height: 33px;
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}

.fangs_bottom {
    width: 25px;
    height: 33px;
    margin-bottom:  -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}

あなたが私の他のCSS作品を見ることを望むならば、そして、.
-$JarvisScript git push
typeerror argument rows has incorrect type(expected list got tuple)解決
MySql文大全(1)追加、検索、削除、変更