CSS3 drawing Tencent QQ Penguin

Draw our penguins

Prerequisite, you have read the CSS3 basic principles of drawing graphics, has some basic graphics drawing understanding.

Online browsing

Start to draw QQ penguin, the first step of the basic framework of the drawing.

By observing the Logo image, the final effect is combined according to the hierarchy. Select use absolute position: Absolute; To lay out the elements. It is mainly divided into head, body, neck, hands and feet.

    <! -- QQ Logo box -->
    <div id="qq">
        <! - head -- -- >
        <div class="head"></div>
        <! -- -- -- > body
        <div class="body"></div>
        <! Hand -- -- -- >
        <div class="handWrapper"></div>
        <! - feet - >
        <div class="footWrapper"></div>
    </div>
Copy the code

The basic frame structure is like this. QQ sets the layout of each element through absolute positioning of containers.

QQ Logo container (drawing board) :

/** * QQ Logo rendering */
#qq {
    position: relative;
    margin: 0 auto;
    width: 420px;
    height: 400px;
    outline: gold solid 2px;
}
Copy the code

The skeleton is out, so we start drawing step by step, starting from scratch:

Before drawing the head, the hierarchy of the head should be clearly divided as in step 1. The hierarchy of the left eye, right eye, upper lip, lower lip and lips should be reflected in sequence

 <! - head -- -- >
<div class="head">
     <! - the left eye -- -- >
     <div class="left eye"></div>
     <! - in the right eye -- -- >
     <div class="right eye"></div>
     <! -- Upper lip -->
     <div class="mouthTopContainer"></div>
     <! -- Lower lip -->
     <div class="mouthBottomContainer"></div>
     <! -- Layers of upper and lower lips -->
     <div class="lispContainer"></div>
 </div>
Copy the code

Draw the outline of the head:

 /* QQ head */
.head {
    position: absolute;
    top: 18px;
    left: 96px;
    width: 234px;
    height: 185px;
    border: 1px solid # 000;
    /* To hook the layer of the border-radius arc */
    border-top-left-radius: 117px 117px;
    border-top-right-radius: 117px 117px;
    border-bottom-left-radius: 117px 68px;
    border-bottom-right-radius: 117px 68px;
}
Copy the code

Why is the arc set to border-bottom-left-radius: 117px 68px; Generally according to the design drawing out after the export into a scale map, will automatically calculate the value; If it doesn’t, it has to be calculated.

Then draw the rest of the head structure in turn:

eyes


/ * * / eyes
.eye {
    position: absolute;
    width: 44px;
    height: 66px;
    border:1px solid # 000;
    border-radius: 50% 50%;
}

.left.eye {
    left: 62px;
    top: 50px;
}

.right.eye {
    left: 132px;
    top: 50px;
}
Copy the code

mouth

/* QQ head -> mouth */
.mouthTopContainer {
    position: absolute;
    top: 120px;
	left: 39px;
    width: 158px;
    height: 29px;
    border: 1px solid # 000;
}

.mouthBottomContainer {
    position: absolute;
    top: 146px;
	left: 39px;
    width: 158px;
    height: 15px;
    border: 1px solid # 000;
}
Copy the code

Here the skeleton of the basic head comes out, and then the lines of the correct skeleton structure are retouched, and now it’s ugly, right?

eyes

<! - the left eye -- -- >
<div class="left eye">
        <! - the eye -- -- >
        <div class="innerLeftEye"></div>
    </div>
    <! - in the right eye -- -- >
    <div class="right eye">
        <! - the eye -- -- >
        <div class="innerRightEye">
              <! -- Circular arc modification at both ends of crescent eye -->
              <div class="fix"></div>
         </div>
</div>
Copy the code

/* QQ head -> eye */
.eye {
    position: absolute;
    width: 44px;
    height: 66px;
    border:1px solid # 000;
    border-radius: 50% 50%;
}

.left.eye {
    left: 62px;
    top: 50px;
}

.right.eye {
    left: 132px;
    top: 50px;
}

.innerLeftEye {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 18px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid # 000;
}

.innerLeftEye::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 6px;
    height: 8px;
    border: 1px solid # 000;
    border-radius: 50%;
}

.innerRightEye {
    position: absolute;
    top: 20px;
    left: 8px;
    /* Outline of the crescent */
    width: 18px;
    height: 24px;
    border: 1px solid # 000;
    border-top-left-radius: 50% 90%;
    border-top-right-radius: 50% 90%;
    border-bottom-left-radius: 50% 10%;
    border-bottom-right-radius: 50% 10%;
}

.innerRightEye::after {
    content: "";
    position: absolute;
    bottom: -1px;
	left: 4px;
    /* Crescent internal eye outline */
    width: 10px;
    height: 13px;
    border: 1px solid # 000;
    border-top-left-radius: 50% 100%;
	border-top-right-radius: 35% 80%;
}

.fix {
    position: absolute;
    top: 17px;
    width: 4px;
    height: 4px;
    border: 1px solid # 000;
    border-radius: 50%;
}

.fix:after{
	content: "";
    position: absolute;
    top: 0;
	left: 14px;
	width: 4px;
    height: 4px;
    border: 1px solid # 000;
	border-radius: 50%;
}

Copy the code

mouth

<! -- Upper lip -->
<div class="mouthTopContainer">
    <div class="mouthTop"></div>
</div>
<! -- Lower lip -->
<div class="mouthBottomContainer">
    <div class="mouthBottom"></div>
</div>
<! -- Upper and lower layers of lips -- bite site -->
<div class="lispContainer">
    <div class="lips">
            <div class="lipShadow left">
            </div>
            <div class="lipShadow right">
            </div>
    </div>
</div>
Copy the code

/* QQ head -> mouth */
.mouthTopContainer {
    / * location * /
    position: absolute;
    top: 120px;
	left: 39px;
    width: 158px;
    height: 29px;
    overflow: hidden; /* Hide the excess part */
}

.mouthTop {
    /* Upper lip contour */
    position: absolute;
    top: 0;
	left: 0;
    width: 158px;
    height: 34px;
    border: 1px solid # 000;
    border-top-left-radius: 45% 34px;
	border-top-right-radius: 45% 34px;
}

.mouthBottomContainer {
    position: absolute;
    top: 146px;
	left: 39px;
    width: 158px;
    height: 15px;
    overflow: hidden;   /* Hide the excess part */
}

.mouthBottom {
    position: absolute;
    top: -4px;
	left: 0;
    width: 158px;
    height: 24px;
    border: 1px solid # 000;
    border-top:none;
    border-bottom-left-radius: 45% 24px;
	border-bottom-right-radius: 45% 24px;
}

/* The upper and lower layers of the lips - occlusal area */
.lispContainer {
    / * location * /
    position: absolute;
	top: 146px;
	left: 60px;
    width: 116px;
    height: 24px;
}

.lips {
    position: absolute;
	top: 0;
	left: 0;
    width: 116px;
    height: 24px;
    border: 1px solid #FFA600;
    border-bottom-left-radius: 50% 100%;
	border-bottom-right-radius: 50% 100%;
}
Copy the code

The basic head contour is like this, and finally, the right eye and the eyeball part are colored to carry out the overlapping cover and hide

.innerRightEye {
    position: absolute;
    top: 20px;
    left: 8px;
    /* Outline of the crescent */
    width: 18px;
    height: 24px;
    /* border: 1px solid #000; * /
    border-top-left-radius: 50% 90%;
    border-top-right-radius: 50% 90%;
    border-bottom-left-radius: 50% 10%;
    border-bottom-right-radius: 50% 10%;
    background: black;
	box-shadow: 0 -1px 2px black;
}

.innerRightEye::after {
    content: "";
    position: absolute;
    bottom: -1px;
	left: 4px;
    /* Crescent internal eye outline */
    width: 10px;
    height: 13px;
    /* border: 1px solid #000; * /
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 35% 80%;
    background: white;
}

.fix {
    position: absolute;
    top: 19px;
    width: 4px;
    height: 4px;
    /* border: 1px solid #000; * /
    border-radius: 50%;
    background: black;
}

.fix:after{
	content: "";
    position: absolute;
    top: 0;
	left: 14px;
	width: 4px;
    height: 4px;
    /* border: 1px solid #000; * /
    border-radius: 50%;
    background: black;
}
Copy the code

Next, I started to draw the body part of QQ. As usual, I divided the body into layers: scarf, scarf tail, inner outline and outer outline

<! -- -- -- > body
<div class="body">
    <! -- Inner outline -->
    <div class="innerWrapper">
         <div class="inner"></div>
    </div>
    <! -- Outline -->
    <div class="outerWrapper">
          <div class="outer"></div>
    </div>
    <! - scarf - >
    <div class="scarf"></div>
    <! -- End of scarf -->
    <div class="scarfEnd"></div>
</div>
Copy the code

The location of each container is laid out first

/* QQ body */
.body {
    /* Body container location */
    position: absolute;
    top: 135px;
    left: 48px;
    width: 326px;
    height: 300px;
    /* border: 1px solid #000; * /
}

/* QQ body -> scarf */
.scarf {
    position: absolute;
    top: -2px;
    left: 34px;
    width: 258px;
    height: 110px;
    border: 1px solid # 000;
    border-top: none;
}

/* QQ body -> scarfEnd */
.scarfEnd {
    position: absolute;
    left: 74px;
    top: 90px;
	width: 52px;
    height: 64px;
    border: 3px solid black;
}

/* QQ body -> innerWrapper */
.innerWrapper {
    /* innerWrapper container location */
    position: absolute;
    left: 30px;
	top: 76px;
    width: 280px;
    height: 200px;
    border: 1px solid # 000;
}

/* QQ body -> outerWrapper */
.outerWrapper{
    /* outerWrapper container location */
    position: absolute;
	top: 54px;
	overflow: hidden;
    width: 262px;
	left: 32px;
    height: 250px;
    border: 1px solid # 000;
}

Copy the code

Contour correction

/* QQ body */
.body {
    /* Body container location */
    position: absolute;
    top: 135px;
    left: 48px;
    width: 326px;
    height: 300px;
    /* border: 1px solid #000; * /
}

/* QQ body -> scarf */
.scarf {
    position: absolute;
    top: -2px;
    left: 34px;
    width: 258px;
    height: 110px;
    border: 1px solid # 000;
    border-top-left-radius: 30px 34px;
	border-top-right-radius: 38px 34px;
	border-bottom-left-radius: 50% 76px;
    border-bottom-right-radius: 50% 76px;
    border-top: none;
}

/* QQ body -> scarfEnd */
.scarfEnd {
    position: absolute;
    left: 74px;
    top: 90px;
	width: 52px;
    height: 64px;
    border: 3px solid black;
    border-bottom-left-radius: 50% 43%;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 20% 57%;
}

/* QQ body -> innerWrapper */
.innerWrapper {
    /* innerWrapper container location */
    position: absolute;
    left: 30px;
	top: 76px;
    width: 280px;
    height: 200px;
    overflow: hidden;
}

.inner {
    position: absolute;
    left: 25px;
	top: -71px;
	width: 218px;
	height: 210px;
    border: 1px solid # 000;
    border-radius: 50%;
}

/* QQ body -> outerWrapper */
.outerWrapper{
    /* outerWrapper container location */
    position: absolute;
	top: 54px;
	overflow: hidden;
    width: 262px;
	left: 32px;
    height: 250px;
}

.outer{
    position: absolute;
	top: -84px;
	width: 260px;
    height: 250px;
    border: 1px solid # 000;
	border-radius: 125px;
}

Copy the code

The general outline is basically out, and there are some internal lines, which will be drawn slowly later.

Next we draw the hand part and install the old way sub-hierarchy: left hand, right hand; The appearance of the hand needs to be drawn through the integration of two divs, so it is divided again: left hand up, left hand down, right hand up, right hand down

<! Hand -- -- -- >
<div class="handWrapper">
    <div class="leftHandTopContainer">
        <div class="leftHandTop"></div>
    </div>
    <div class="leftHandBottomContainer">
        <div class="leftHandBottom"></div>
    </div>
    <div class="rightHandTopContainer">
        <div class="rightHandTop"></div>
    </div>
    <div class="rightHandBottomContainer">
        <div class="rightHandBottom"></div>
    </div>
</div>
Copy the code

/* QQ handWrapper */
.handWrapper{
    /* Position the starting point of the hand */
	position: absolute;
	top: 219px;
	left: 7px;
}

/* QQ handWrapper -left */
.leftHandTopContainer {
    / * location * /
	position: absolute;
	top: 55px;
	left: 50px;
    width: 118px;
    height: 26px;
    border: 1px solid # 000;
	transform-origin: bottom left;
	transform: rotate(-70deg);
}

.leftHandBottomContainer {
    / * location * /
    position: absolute;
	top: 78px;
	left: 50px;
	width: 100px;
    height: 30px;
    border: 1px solid # 000;
	transform-origin: top left;
	transform: rotate(-70deg);
}

/* QQ handWrapper -right */
.rightHandTopContainer {
    / * location * /
    position: absolute;
	top: 47px;
	left: 240px;
    width: 118px;
    height: 34px;
    border: 1px solid # 000;
	transform-origin: bottom right;
    transform: rotate(65deg);
}

.rightHandBottomContainer{
    / * location * /
    position: absolute;
	top: 81px;
    left: 248px;
	width: 110px;
	height: 58px;
    border: 1px solid # 000;
	transform-origin: top right;
	transform: rotate(90deg);
}

Copy the code

Line outline modification

/* QQ handWrapper */
.handWrapper{
    /* Position the starting point of the hand */
	position: absolute;
	top: 219px;
	left: 7px;
}

/* QQ handWrapper -left */
.leftHandTopContainer {
    / * location * /
	position: absolute;
	top: 55px;
	left: 50px;
    width: 118px;
    height: 26px;
    /* border: 1px solid #000; * /
	transform-origin: bottom left;
    transform: rotate(-70deg);
    overflow: hidden;
}

.leftHandTop {
     /* Top part */
	width: 128px;
	height: 54px;
    border: 1px solid # 050346;
    border-top-left-radius: 44% 38px;
    border-top-right-radius: 56% 33px;
}

.leftHandBottomContainer {
    / * location * /
    position: absolute;
	top: 78px;
	left: 50px;
	width: 100px;
    height: 30px;
    /* border: 1px solid #000; * /
	transform-origin: top left;
    transform: rotate(-70deg);
    overflow: hidden;
}

.leftHandBottom {
    position: absolute;
    top: -26px;
    width: 128px;
	height: 44px;
    border: 1px solid # 050346;
    border-bottom-left-radius: 48% 20px;
	border-bottom-right-radius: 52% 23px;
}

/* QQ handWrapper -right */
.rightHandTopContainer {
    / * location * /
    position: absolute;
	top: 47px;
	left: 240px;
    width: 118px;
    height: 34px;
    /* border: 1px solid #000; * /
	transform-origin: bottom right;
    transform: rotate(65deg);
    overflow: hidden;
}

.rightHandTop {
    position: absolute;
    left: -30px;
    width: 148px;
	height: 54px;
    border: 1px solid # 050346;
    border-top-right-radius: 41% 54px;
    border-top-left-radius: 59% 48px;
}

.rightHandBottomContainer{
    / * location * /
    position: absolute;
	top: 81px;
    left: 248px;
	width: 110px;
	height: 58px;
    /* border: 1px solid #000; * /
	transform-origin: top right;
    transform: rotate(90deg);
    overflow: hidden;
}

.rightHandBottom {
    position: absolute;
	top: 1px;
	left: 38px;
    width: 68px;
	height: 28px;
    border: 1px solid # 000;
    border-bottom-right-radius: 100% 40px;
}

Copy the code

Is it a lot more beautiful, then quickly finish the foot part, and the structure of the hand is basically similar.

<! - feet - >
<div class="footWrapper">
    <div class="leftFootTopWrapper">
        <div class="leftFootTop"></div>
    </div>
    <div class="leftFootBottomWrapper">
        <div class="leftFootBottom"></div>
    </div>
    <div class="rightFootTopWrapper">
        <div class="rightFootTop"></div>
    </div>
    <div class="rightFootBottomWrapper">
        <div class="rightFootBottom"></div>
    </div>
</div>
Copy the code

Base position layout

/* QQ footerWrapper */
.footWrapper{
    /* Locate the starting point */
	position: absolute;
	top: 292px;
    left: 80px;
    width: 300px;
    height: 80px;
    border: 1px solid # 000;
}

/* QQ footerWrapper -> left */
.leftFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 16px;
	left: -1px;
    width: 130px;
    height: 37px;
    border: 1px solid # 000;
}

.leftFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
    border: 1px solid # 000;
}

/* QQ footerWrapper -> right */
.rightFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 22px;
	left: 134px;
    width: 130px;
    height: 38px;
    border: 1px solid # 000;
}

.rightFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: 134px;
	width: 134px;
    height: 38px;
    border: 1px solid # 000;
}

Copy the code

Contour adjustment


/* QQ footerWrapper */
.footWrapper{
    /* Locate the starting point */
	position: absolute;
	top: 292px;
    left: 80px;
    width: 300px;
    height: 80px;
    /* border: 1px solid #000; * /
}

/* QQ footerWrapper -> left */
.leftFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 16px;
	left: -1px;
    width: 130px;
    height: 37px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.leftFootTop {
    position: absolute;
	top: -10px;
    left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid black;
    border-top-left-radius: 80% 70%;
}

.leftFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.leftFootBottom {
    position: absolute;
    top: -30px;
	left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid # 000;
    border-top-left-radius: 50% 44%;
	border-top-right-radius: 50% 44%;
	border-bottom-left-radius: 50% 56%;
	border-bottom-right-radius: 50% 56%;
}

/* QQ footerWrapper -> right */
.rightFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 22px;
	left: 134px;
    width: 130px;
    height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.rightFootTop {
    position: absolute;
    top: 0px;
	left: 4px;
    width: 120px;
	height: 60px;
    border: 4px solid black;
    border-top-right-radius: 32% 65%;
}

.rightFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: 134px;
	width: 134px;
    height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.rightFootBottom {
    position: absolute;
    top: -30px;
	left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid # 000;
    border-top-left-radius: 50% 56%;
	border-top-right-radius: 50% 56%;
	border-bottom-left-radius: 50% 44%;
	border-bottom-right-radius: 50% 44%;
}

Copy the code

I’ve got the basic frame structure, so let’s start coloring. The coloring process helps us adjust the Z-index, the overlapping layers of the modules, to cover up useless lines and corners.

A head start

 /* QQ head */
.head {
    position: absolute;
    top: 18px;
    left: 96px;
    width: 234px;
    height: 185px;
    border: 1px solid # 000;
    border-top-left-radius: 117px 117px;
    border-top-right-radius: 117px 117px;
    border-bottom-left-radius: 117px 68px;
    border-bottom-right-radius: 117px 68px;
    background: # 000;
}

/* QQ head -> eye */
.eye {
    position: absolute;
    width: 44px;
    height: 66px;
    border:1px solid # 000;
    border-radius: 50% 50%;
    background: #fff;
}

.left.eye {
    left: 62px;
    top: 50px;
}

.right.eye {
    left: 132px;
    top: 50px;
}

.innerLeftEye {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 18px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid # 000;
    background: # 000;
}

.innerLeftEye::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 6px;
    z-index: 11;
    height: 8px;
    /* border: 1px solid #000; * /
    border-radius: 50%;
    background: #fff;
}

.innerRightEye {
    position: absolute;
    top: 20px;
    left: 8px;
    /* Outline of the crescent */
    width: 18px;
    height: 24px;
    /* border: 1px solid #000; * /
    border-top-left-radius: 50% 90%;
    border-top-right-radius: 50% 90%;
    border-bottom-left-radius: 50% 10%;
    border-bottom-right-radius: 50% 10%;
    background: black;
    box-shadow: 0 -1px 2px black;
}

.innerRightEye::after {
    content: "";
    position: absolute;
    bottom: -1px;
	left: 4px;
    /* Crescent internal eye outline */
    width: 10px;
    height: 13px;
    /* border: 1px solid #000; * /
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 35% 80%;
    background: #FFF;
}

.fix {
    position: absolute;
    top: 19px;
    width: 4px;
    height: 4px;
    /* border: 1px solid #000; * /
    border-radius: 50%;
    background: # 000;
}

.fix:after{
	content: "";
    position: absolute;
    top: 0;
	left: 14px;
	width: 4px;
    height: 4px;
    /* border: 1px solid #000; * /
    border-radius: 50%;
    background: black;
}

/* QQ head -> mouth */
.mouthTopContainer {
    / * location * /
    position: absolute;
    top: 120px;
    left: 39px;
    z-index: 1;
    width: 158px;
    height: 29px;
    overflow: hidden; /* Hide the excess part */
}

.mouthTop {
    /* Upper lip contour */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 158px;
    height: 34px;
    border: 1px solid #FFA600;
    border-top-left-radius: 45% 34px;
    border-top-right-radius: 45% 34px;
    background: #FFA600;
}

.mouthBottomContainer {
    position: absolute;
    top: 146px;
    left: 39px;
    z-index: 1;
    width: 158px;
    height: 15px;
    overflow: hidden;   /* Hide the excess part */
}

.mouthBottom {
    position: absolute;
    top: -4px;
    left: 0;
    z-index: 1;
    width: 158px;
    height: 24px;
    border: 1px solid #FFA600;
    border-top:none;
    border-bottom-left-radius: 45% 24px;
    border-bottom-right-radius: 45% 24px;
    background: #FFA600;
}

/* The upper and lower layers of the lips - occlusal area */
.lispContainer {
    / * location * /
    position: absolute;
	top: 146px;
	left: 60px;
    width: 116px;
    height: 24px;
}

.lips {
    position: absolute;
	top: 0;
	left: 0;
    width: 116px;
    height: 24px;
    border: 1px solid #FFA600;
    border-bottom-left-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
    background: #FFA600;
}

Copy the code

body

/* QQ body */
.body {
    /* Body container location */
    position: absolute;
    top: 135px;
    left: 48px;
    width: 326px;
    height: 300px;
    /* border: 1px solid #000; * /
}

/* QQ body -> scarf */
.scarf {
    position: absolute;
    top: -2px;
    left: 34px;
    z-index: 5;
    width: 258px;
    height: 110px;
    border: 1px solid # 000;
    border-top-left-radius: 30px 34px;
	border-top-right-radius: 38px 34px;
	border-bottom-left-radius: 50% 76px;
    border-bottom-right-radius: 50% 76px;
    border-top: none;
    background: #FB0009;
}

/* QQ body -> scarfEnd */
.scarfEnd {
    position: absolute;
    left: 74px;
    top: 90px;
	width: 52px;
    height: 64px;
    border: 3px solid black;
    border-bottom-left-radius: 50% 43%;
	border-bottom-right-radius: 15px;
    border-top-left-radius: 20% 57%;
    background: #FB0009;
}

/* QQ body -> innerWrapper */
.innerWrapper {
    /* innerWrapper container location */
    position: absolute;
    left: 30px;
	top: 76px;
    width: 280px;
    height: 200px;
    overflow: hidden;
}

.inner {
    position: absolute;
    left: 25px;
	top: -71px;
	width: 218px;
	height: 210px;
    border: 1px solid # 000;
    border-radius: 50%;
    background: #fff;
}

/* QQ body -> outerWrapper */
.outerWrapper{
    /* outerWrapper container location */
    position: absolute;
	top: 54px;
	overflow: hidden;
    width: 262px;
	left: 32px;
    height: 250px;
}

.outer{
    position: absolute;
	top: -84px;
	width: 260px;
    height: 250px;
    border: 1px solid # 000;
    border-radius: 125px;
    background: # 000;
}
Copy the code

After coloring, you will notice that some layers are displayed in the wrong order, so you need to adjust the order.

head > body
ScafEnd > inner > outer

hand

/* QQ handWrapper -left */
.leftHandTopContainer {
    / * location * /
	position: absolute;
	top: 55px;
	left: 50px;
    width: 118px;
    height: 26px;
    /* border: 1px solid #000; * /
	transform-origin: bottom left;
    transform: rotate(-70deg);
    overflow: hidden;
}

.leftHandTop {
     /* Top part */
	width: 128px;
	height: 54px;
    border: 1px solid # 050346;
    border-top-left-radius: 44% 38px;
    border-top-right-radius: 56% 33px;
    background: # 000;
}

.leftHandBottomContainer {
    / * location * /
    position: absolute;
	top: 78px;
	left: 50px;
	width: 100px;
    height: 30px;
    /* border: 1px solid #000; * /
	transform-origin: top left;
    transform: rotate(-70deg);
    overflow: hidden;
}

.leftHandBottom {
    position: absolute;
    top: -26px;
    width: 128px;
	height: 44px;
    border: 1px solid # 050346;
    border-bottom-left-radius: 48% 20px;
    border-bottom-right-radius: 52% 23px;
    background: # 000;
}

/* QQ handWrapper -right */
.rightHandTopContainer {
    / * location * /
    position: absolute;
	top: 47px;
	left: 240px;
    width: 118px;
    height: 34px;
    /* border: 1px solid #000; * /
	transform-origin: bottom right;
    transform: rotate(65deg);
    overflow: hidden;
}

.rightHandTop {
    position: absolute;
    left: -30px;
    width: 148px;
	height: 54px;
    border: 1px solid # 050346;
    border-top-right-radius: 41% 54px;
    border-top-left-radius: 59% 48px;
    background: # 000;
}

.rightHandBottomContainer{
    / * location * /
    position: absolute;
	top: 81px;
    left: 248px;
	width: 110px;
	height: 58px;
    /* border: 1px solid #000; * /
	transform-origin: top right;
    transform: rotate(90deg);
    overflow: hidden;
}

.rightHandBottom {
    position: absolute;
	top: 1px;
	left: 38px;
    width: 68px;
	height: 28px;
    border: 1px solid # 000;
    border-bottom-right-radius: 100% 40px;
    background: # 000;
}

Copy the code

footer

/* QQ footerWrapper */
.footWrapper{
    /* Locate the starting point */
	position: absolute;
	top: 292px;
    left: 80px;
    width: 300px;
    height: 80px;
    /* border: 1px solid #000; * /
}

/* QQ footerWrapper -> left */
.leftFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 16px;
	left: -1px;
    width: 130px;
    height: 37px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.leftFootTop {
    position: absolute;
	top: -10px;
    left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid black;
    border-top-left-radius: 80% 70%;
    background: #FF9C00;
}

.leftFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.leftFootBottom {
    position: absolute;
    top: -30px;
	left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid # 000;
    border-top-left-radius: 50% 44%;
	border-top-right-radius: 50% 44%;
	border-bottom-left-radius: 50% 56%;
    border-bottom-right-radius: 50% 56%;
    background: #FF9C00;
}

/* QQ footerWrapper -> right */
.rightFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 22px;
	left: 134px;
    width: 130px;
    height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.rightFootTop {
    position: absolute;
    top: 0px;
	left: 4px;
    width: 120px;
	height: 60px;
    border: 4px solid black;
    border-top-right-radius: 32% 65%;
    background: #FF9C00;
}

.rightFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: 134px;
	width: 134px;
    height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.rightFootBottom {
    position: absolute;
    top: -30px;
	left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid # 000;
    border-top-left-radius: 50% 56%;
	border-top-right-radius: 50% 56%;
	border-bottom-left-radius: 50% 44%;
    border-bottom-right-radius: 50% 44%;
    background: #FF9C00;
}

Copy the code

Basically, 90% of the work is done here. The rest is line optimization to make QQ look more hierarchical and three-dimensional.

lips

The mouth shape is not sexy enough, three-dimensional; Create a hypotenuse triangle to restore the layers of the lips.

Draw such a hypotenuse triangle and the steps are broken down as shown below:

First draw an ordinary triangle and rotate it counterclockwise to get a repair triangle. Then the repair triangle can be obtained by using rotateY to rotate 180 degrees around the Y-axis.

<! -- Layers of upper and lower lips -->
<div class="lispContainer">
    <div class="lips">
        <! -- Left and right upper and lower lips occlude shadow -->
        <div class="lipShadow left"></div>
        <div class="lipShadow right"></div>
    </div>
</div>
Copy the code

/* The upper and lower layers of the lips - occlusal area */
.lispContainer {
    / * location * /
    position: absolute;
	top: 146px;
	left: 60px;
    width: 116px;
    height: 24px;
}

.lips {
    position: absolute;
	top: 0;
	left: 0;
    width: 116px;
    height: 24px;
    border: 1px solid #FFA600;
    border-bottom-left-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
    background: #FFA600;
}

.lipShadow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 8px solid black;
	transform-origin: top right;
    transform: rotate(-60deg);
    z-index: 2;
}

.lipShadow.left {
    top: 4px;
    left: -12px;
    transform: rotate(-60deg);
}

.lipShadow.right {
    top: 4px;
    left: 111px;
    transform: rotate(60deg) rotateY(180deg);
}

Copy the code

The scarf

The collar has no creases and is not three-dimensional; Embellished by painting a “little tail”

border-right: 6px solid black;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;
Copy the code

When applying a rounded style to an Angle, if the border of the Angle is defined and the border is undefined, the result will be a “small tail” drawn from thick to thin. For example, a rectangle can be formed by width x height, border x height(width), or even border combination (width = height = 0). Choose according to the circumstances.

<! - scarf - >
<div class="scarf">
    <div class="scarfShadow"></div>
    <div class="scarfShadowRight"></div>
</div>
<! -- End of scarf -->
<div class="scarfEnd">
    <div class="scarfEndShadow"></div>
</div>
</div>
Copy the code

/* QQ body -> scarf */
.scarf {
    position: absolute;
    top: -2px;
    left: 34px;
    z-index: 5;
    width: 258px;
    height: 110px;
    border: 4px solid # 000;
    border-top-left-radius: 30px 34px;
	border-top-right-radius: 38px 34px;
	border-bottom-left-radius: 50% 76px;
    border-bottom-right-radius: 50% 76px;
    border-top: none;
    background: #FB0009;
}

.scarfShadowLeft {
    position: absolute;
    top: 0px;
	left: 6px;
	width: 60px;
    height: 70px;
    /* border: 4px solid #000; * /
    border-top: 6px solid # 000;
	border-top-left-radius: 90px 120px;
    border-top-right-radius: 30px 30px;
	transform: rotate(-79deg);
}

.scarfShadowRight {
    position: absolute;
    top: 8px;
	left: 143px;
	width: 100px;
    height: 70px;
    /* border: 4px solid #000; * /
    border-right: 6px solid black;
	width: 100px;
    border-bottom-right-radius: 70px 70px;
    border-right: 6px solid black;
}

/* QQ body -> scarfEnd */
.scarfEnd {
    position: absolute;
    left: 74px;
    top: 90px;
	width: 52px;
    height: 64px;
    border: 3px solid black;
    border-bottom-left-radius: 50% 43%;
	border-bottom-right-radius: 15px;
    border-top-left-radius: 20% 57%;
    background: #FB0009;
    z-index: 4;
}

.scarfEndShadow {
    position: absolute;
    top: 6px;
	left: 12px;
	width: 20px;
    height: 20px;
    /* border: 4px solid #000; * /
    border-top: 6px solid # 000;
    border-top-left-radius: 30px 30px;
    transform-origin: top right;
    transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
}
Copy the code

foot

It was also embellished by drawing a small tail

<! - feet - >
<div class="footWrapper">
    <div class="leftFootTopWrapper">
        <div class="leftFootTop"></div>
    </div>
    <div class="leftFootBottomWrapper">
        <div class="leftFootBottom"></div>
    </div>
    <! -- Toe spacing line -->
    <div class="toe left"></div>
    <div class="rightFootTopWrapper">
        <div class="rightFootTop"></div>
    </div>
    <div class="rightFootBottomWrapper">
        <div class="rightFootBottom"></div>
    </div>
    <! -- Toe spacing line -->
    <div class="toe right"></div>
</div>
Copy the code

/* QQ footerWrapper */
.footWrapper{
    /* Locate the starting point */
	position: absolute;
	top: 292px;
    left: 80px;
    width: 300px;
    height: 80px;
    /* border: 1px solid #000; * /
}

.toe {
    position: absolute;
	width: 25px;
	height: 20px;
    /* border: 4px solid #000; * /
    border-top: 4px solid black;
    border-top: 4px solid black;
    border-top-right-radius: 30px 30px;
    border-top-left-radius: 10px 10px;
    transform-origin: top left;
    z-index: 10;
}

/* QQ footerWrapper -> left */
.leftFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 16px;
	left: -1px;
    width: 130px;
    height: 37px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.leftFootTop {
    position: absolute;
	top: -10px;
    left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid black;
    border-top-left-radius: 80% 70%;
    background: #FF9C00;
}

.toe.left {
    top: 50px;
    left: 2px;
    transform: rotate(-45deg);
}

.leftFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: -1px;
	width: 130px;
	height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.leftFootBottom {
    position: absolute;
    top: -30px;
	left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid # 000;
    border-top-left-radius: 50% 44%;
	border-top-right-radius: 50% 44%;
	border-bottom-left-radius: 50% 56%;
    border-bottom-right-radius: 50% 56%;
    background: #FF9C00;
}

/* QQ footerWrapper -> right */
.rightFootTopWrapper {
    /* Position the container on the left foot */
    position: absolute;
	top: 22px;
	left: 134px;
    width: 130px;
    height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.rightFootTop {
    position: absolute;
    top: 0px;
	left: 4px;
    width: 120px;
	height: 60px;
    border: 4px solid black;
    border-top-right-radius: 32% 65%;
    background: #FF9C00;
}

.toe.right {
    top: 50px;
    left: 264px;
    transform: rotate(45deg) rotateY(180deg);
}

.rightFootBottomWrapper {
    position: absolute;
    top: 52px;
	left: 134px;
	width: 134px;
    height: 38px;
    /* border: 1px solid #000; * /
    overflow: hidden;
}

.rightFootBottom {
    position: absolute;
    top: -30px;
	left: 3px;
    width: 120px;
	height: 60px;
    border: 4px solid # 000;
    border-top-left-radius: 50% 56%;
	border-top-right-radius: 50% 56%;
	border-bottom-left-radius: 50% 44%;
    border-bottom-right-radius: 50% 44%;
    background: #FF9C00;
}
Copy the code

Accomplished, a vivid QQ penguin is finished drawing ~

Introduce several typical drawing methods in this process:

1, Penguin eyes: ellipse, directly set border-radius:50% 50%; [border-radius: 22px / 33px]

2, the tail of the neck: a rectangle with different rounded corners, so we need to set the border-radius for each corner. The result of fine tuning is

border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
Copy the code

3. Penguin arms: Hand drawing is a bit more difficult, which can be divided into upper and lower parts to splice the drawing results together. So what about the parts you don’t need? We can place the upper (lower) portion into a div(Container), using the Overflow: Hidden property to capture the desired portion. The common method for drawing complex graphics is cutting and splicing, which cut the graphics into simple pieces and combine them through cascade and rotation changes.

When using transform: Rotate (DEg), the transform-origin attribute takes precedence. Set the point as the center point, the whole graph changes Angle around this point. For example, transform-origin:bottom left, using the lower left corner as the origin. You can also use specific pixel values and percentages.

In the basic frame line more than a lot of use of border-radius for the construction of various curve bars, little penguin is round and chubby, 🙂

In this paper, the reference

The source code

Draw our penguins

Related Posts

VSCode for Vue (Vue + Prettier + ESLint)

Write a Javascript class library (jQuery)

Transform and Transition are used to realize the rotation graph and solve the pit rendered by the browser when the last graph is switched