CSS3 Drawing Cartoons-Great White

The first time to share their own code, I hope the great God of all the way to teach! First on the demo chart

HTML section:

<Divclass= "Wrap">        <Divclass= "header">            <Divclass= "Eyeleft"></Div>            <Divclass= "Eyeright"></Div>            <Divclass= "Eyemouth"></Div>        </Div>        <Divclass= "Body">            <!--part of the body -            <Divclass= "Body_top">                <!--Heart Area -                <Divclass= "Body_top_heart"ID= "TUMMY">                    <span></span>                    <span></span>                    <span></span>                    <span></span>                    <span></span>                </Div>            </Div>            <!--The middle part of the body -            <Divclass= "Body_middle">                <Divclass= "Body_middle_left"></Div>                <Divclass= "Body_middle_right"></Div>            </Div>            <!--The Middle Belly of the body -            <Divclass= "Body_tummy"></Div>            <!--a display block on the body's belly -            <Divclass= "Body_display"ID= "SHOW"></Div>            <PHidden ID= "Tell">Hello! I am white, your personal health assistant!</P>            <!--Body Hand Part -            <Divclass= "Head">                <Divclass= "Head_left">                    <Divclass= "Head_left1"></Div>                    <Divclass= "head_left2"></Div>                </Div>                <Divclass= "Head_right">                    <Divclass= "Head_right1"></Div>                    <Divclass= "Head_right2"></Div>                </Div>            </Div>            <!--Body Foot Part -            <Divclass= "Body_foot">                <!--left -                <Divclass= "Body_foot_left"></Div>                <Divclass= "Body_foot_right"></Div>            </Div>            <!--Body Shadow -            <Divclass= "Body_shadow"></Div>        </Div>    </Div>

CSS section:

Body{background: #af2024;}. Wrap{width:500px;height:700px;margin:0 auto;position:relative;} /* Head */.header{width:114px;height:76px;background:-webkit-linear-gradient (Top, #fff 50%, #d6d6d6 100%); background:    Linear-gradient (Top, #fff 50%, #d6d6d6 100%) border-radius:50% 50% 45% 45%;p osition:relative;margin:0 auto;top:60px;    box-shadow:0 5px 5px Rgba (0,0,0,0.2);    z-index:400;    Animation:turn 6s Infinite; -webkit-animation:turn 6s Infinite;}. Eyeleft{width:14px;height:14px;background: #333; border-radius:50%;p osition:absolute;left:23px;top:30px; Animation:nication 2.3s ease infinite;-webkit-animation:nication 2.3s ease infinite;}. Eyeright{width:14px;height:14px;background: #333; border-radius:50%;p osition:absolute;left:74px;top:30px; Animation:nication 2.3s ease infinite;-webkit-animation:nication 2.3s ease infinite;} @keyframes nication{0%,20%, 100%{-webkit-transform:scale; transform:scale;} 10%{-webkit-transform:scale (1,0.2); Transform:scale (1,0.2);}} @-webkit-keyfRames nication{0%,20%, 100%{-webkit-transform:scale (n); Transform:scale (n);} 10%{-webkit-transform:scale (1,0.2); Transform:scale (1,0.2);}} @keyframes turn{0%,10%,20%,30%,80%,90%,100%{-webkit-transform:rotate (0deg); transform:rotate (0deg);} 35%,40%,45%,50%,55%,65%,75%{-webkit-transform:rotate (5deg); transform:rotate (5deg);}} @-webkit-keyframes turn{0%,10%,20%,30%,80%,90%,100%{-webkit-transform:rotate (0deg); transform:rotate (0deg);} 35%,40%,45%,50%,55%,65%,70%,75%{-webkit-transform:rotate (5deg); transform:rotate (5deg);}}. eyemouth{width:55px;height:5px;border-radius:50%;box-shadow:0 1.5px 0 #333;p osition:absolute;top:33px;left:30px;}    /* Body */.body_top{width:226px;    height:160px;    Background:-webkit-linear-gradient (top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);    Background:linear-gradient (Top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);    border-radius:105px 105px 5px 5px;    Position:absolute;    top:118px;    left:135px; z-index:200;}. Body_top_heart{width:30px;height:30px;background: #eee; border-radius:50%;p osition:absolute;top:60px;left:155px;box-shadow:0px 3px 1px rgba (0,0,0,.1), 0px 3px 2px Rgba        (255,255,255,1) Inset;-webkit-transform:skew (10deg,0) rotate (10deg);        Transform:skew (10deg,0) rotate (10deg);        Overflow:hidden; Cursor:pointer;}.    body_top_heart>span{width:8px;    height:1px;    Background:rgba (0,0,0,0.1); Position:absolute;}. Body_top_heart>span:nth-child (1) {top:17px;left:0px;}.    Body_top_heart>span:nth-child (2) {width:6px;    left:7px;    top:15px; Transform:rotate ( -45deg);}.    Body_top_heart>span:nth-child (3) {width:8px;    left:12px;    top:13px; Transform:rotate (0deg);}.    Body_top_heart>span:nth-child (4) {width:6px;    left:19px;    top:15px; Transform:rotate (45deg);}.    Body_top_heart>span:nth-child (5) {left:24px; top:17px;}. Body_middle_left{width:200px;height:280px;background: #eee;p Osition:absolute;top:200px;left:115px;border-radius    : 15% 30%;transform:rotate (10DEG); BOx-shadow: -3px 0 3px Rgba (0,0,0,0.1); z-index:100;}. Body_middle_right{width:200px;height:280px;background: #eee;p osition:absolute;top:200px;left:180px;    border-radius:30% 15%;transform:rotate ( -10DEG);    box-shadow:3px 0 3px Rgba (0,0,0,0.1); z-index:100;}.    body_tummy{width:286px;height:233px;border-radius:50%;p osition:absolute;top:290px;left:103px;    Background:-webkit-linear-gradient (top, #eee 50%, #d2d2d2 100%);    Background:linear-gradient (Top, #eee 50%, #d2d2d2 100%);    box-shadow:0px 5px 5px Rgba (0,0,0,.2); z-index:300;}.    body_foot_left{width:118px;height:180px;position:absolute;top:450px;left:132px;    Background: #eee;    border-radius:10% 20% 18% 58%;    box-shadow:-1px 0px 8px rgba (0,0,0,0.2) inset; z-index:20;}.    body_foot_right{width:118px;height:180px;position:absolute;top:450px;left:250px;    Background: #eee;    border-radius:18% 10% 58% 20%;    box-shadow:1px 0px 8px rgba (0,0,0,0.2) inset; z-index:20;}. Head. Head_left1{width:260px;heighT:150px;background: #eee;p osition:absolute;top:170px;    Left:36px;transform:rotate ( -48DEG); border-radius:50%;}. Head. Head_left2{width:100px;height:237px;background: #eee;p osition:absolute;top:215px;left:56px;transform:    Rotate (2deg); border-radius:50%;}.    Head. Head_right1{width:260px;height:150px;background: #eee;p osition:absolute;top:170px;    left:200px;    Transform:rotate (48DEG); border-radius:50%;}. Head. Head_right2{width:100px;height:237px;background: #eee;p osition:absolute;top:215px;left:338px;transform:    Rotate ( -2deg); border-radius:50%;}.    body_shadow{width:100px;    height:80px;    Position:absolute;    bottom:100px; left:180px;}.    Body_shadow:before{content: "; width:150px;height:80px;position:absolute;bottom:0px;left:125px; Box-shadow: -200px 70px 30px Rgba (160,28,32,0.58);}.    Body_shadow:after{content: "; width:150px;height:80px;position:absolute;bottom:0px;left:273px; Box-shadow: -200px 70px 30px Rgba (160,28,32,0.58);}. Body_display{width:135px;height:0px;background: #f3f3f3;p osition:absolute;top:320px;left:170px;z-index:99999; box-shadow:1px 1px 5px #eee inset;font-size:12px;font-family: \5fae\8f6f\96c5\9ed1;line-height:25px;letter-spacing: 2px;color: #a2a2a2; overflow:hidden;}

End of code!

Reissue the display code in the middle of the big White (with JQ)

<script type= "Text/javascript" >var num=0;var open=true;var Word=document.getelementbyid (' Tell '). InnerHTML; var Show=document.getelementbyid ("show"), Var Tum=document.getelementbyid (' TUMMY '), Tum.onclick=function () {if (open ==true) {$ (' #SHOW '). Animate ({' Height ': ' 50px ', ' top ': ' 295px '},500); show.style.padding= ' 10px '; Time=setinterval ( addtell,300); SetTimeout (clear,8000);} Open=false;} /*greetings*/function Addtell () {show.innertext = word.substring (0,num++); Console.log (num);} /*empty*/function Clear () {clearinterval (time); num=0;$ (' #SHOW '). html ('); $ (' #SHOW '). Animate ({' height ': ' 0px ', ' top ': ' 320px '},500,function () {$ (' #SHOW '). css (' padding ', ' 0px '); return open=true;}); </script>

My GitHub code address: Https://github.com/Mr-hyc/CSS3-.git

CSS3 Drawing Cartoons-Great White