用纯css3圆角边框和HTML5写出戴花围巾吃柠檬味棒棒糖的企鹅，插入一些小动画，更加活灵活现，好萌。
css样式
html,body,div,strong{
margin: 0;
padding: 0;
}
.all{
width: 1000px;height: 1000px;
}
.all1{
width: 800px;height: 600px;
margin:0 auto;
padding-top: 200px;
border: 1px red solid;
/*background-color: red;*/
position: relative;
}
/*设置外面的两层结构*/
/*top是脖子以上部分*/
.headtop{
height: 110px;
width: 240px;
background-color: black;
margin: 0 auto;
border-top-left-radius: 120px 110px;
border-top-right-radius: 120px 110px;
position: relative;
z-index: 99;
/*border-bottom:1px red solid; */
}
.headxia{
height: 80px;
width: 240px;
background-color: black;
margin: 0 auto;
border-bottom-left-radius: 120px 70px;
border-bottom-right-radius: 120px 70px;
position: relative;
z-index: 99;
}
.left_eye{
width: 46px;
height: 70px;
background: #fff;
border-radius: 50% 50%;
position: absolute;
top: 30px;
left: 64px;
z-index: 909;
}
.right_eye{
width: 46px;
height: 70px;
background: #fff;
border-radius: 50% 50%;
position: absolute;
top: 30px;
right: 64px;
z-index: 909;
}
.left_eye1{
width: 20px;
height: 30px;
background: #000;
border-radius: 50% 50%;
margin: 20px 13px;position: relative;
z-index: 919;
}
.right_eye1{
width: 20px;
height: 30px;
background: #000;
border-radius: 50% 50%;z-index: 919;
margin: 20px 13px;position: relative;
}
.left_eye2{width: 8px;
height: 10px;
border-radius: 50% 50%;
background: #fff;z-index: 929;
position: absolute;
top: 4px;
right: 4px;
}
.right_eye2{z-index: 929;
width: 12px;
height: 19px;
background: #fff;
border-radius: 12px 50%;
margin: 12px 50%;
position: absolute;
top: 1px;
right: 0px;}
.zuiba{height: 50px;
width: 160px;
background-color: red;
border-radius: 50%;
border-radius: 50%;
position: absolute;
left: 39px;z-index: 939;
top: 9px;}
.zuiba1{height: 30px;
width: 130px;
background-color: rgb(235,0,0);
border-radius: 50%;
border-radius: 50%;
position: absolute;z-index: 939;
left: 19px;
top: 19px;
}
.weijin{height: 80px;
width: 270px;
background-color: pink;
border: 3px solid pink;
border-radius:20% 30% 50% 80%;
margin-top: 40px;
z-index: 9;
}
.weijin1{height: 120px;
width: 300px;
background-color: rgb(246,235,179);
border: 3px solid white;
border-radius: 20% 30% 50% 80% ;
position: absolute;
top: 300px;
left:350px;
z-index: 19;
}
.heiduzi{
width: 276px;
height: 260px;
background: #000;
position: absolute;
top: 342px;
left: 350px;
border-top-left-radius: 160px 140px;
border-bottom-left-radius: 160px 140px;
border-top-right-radius: 160px 140px;
border-bottom-right-radius: 160px 140px;
}
.baiduzi{
width: 240px;
height: 240px;
background: #fff;
position: absolute;
top: 11px;
left: 17px;
border-radius: 50%;
}
.tanggunzi{
height: 82px;width: 8px;
background-color: grey;border:
border:1px grey solid;
position: absolute;
left:100px;top: 50px;
z-index: 1000;
transform: rotateZ(10deg);
}
.tang{
width: 60px;
height: 60px;
background-color: yellow;
border-radius: 30px;
z-index: 10000;
position: relative;
left: 90px;
animation:aa 0.5s linear 0s infinite ;
}
@-webkit-keyframes aa{
from{
margin-top: 0px;
box-shadow:0px 0px 10px 10px orange;
}
to{
margin-top: -4px;
box-shadow:0px 0px 10px 0px rgba(0,255,0,.5);
}
}
.zuoshou,.youshou{
width: 49px;
height: 160px;
background: #000;
}
.zuoshou{
position: absolute;
top: 410px;
left:395px;
border-top-left-radius: 89px 166px;
border-top-right-radius: 6px 63px;
border-bottom-left-radius: 85px 194px;
border-bottom-right-radius: 40px 128px;
z-index: 1001;
transform: rotateZ(-70deg) ;
/* translate3d(200px 0px 40px);*//*倾斜一点*/
}
.youshou{
position: absolute;
top: 410px;
left: 655px;
border-top-right-radius: 89px 166px;
border-top-left-radius: 6px 63px;
border-bottom-right-radius: 85px 194px;
border-bottom-left-radius: 40px 128px;
transform-origin:(0px 0px);
transform: rotateZ(-30deg);
/*animation:yundong 0.8s linear 0s infinite ;*/
}
/*@-webkit-keyframes yundong{
from{
transform: rotateZ(-30deg);
}
to{
transform: rotateZ(-60deg);
}
}*/
.youshou:hover{
transform: rotateZ(-60deg);
}
/*用动画和伪类都可以实现*/
.zuojiao,.youjiao{
width: 134px;
height: 74px;
background: #ffa600;
border: 3px solid #000;
border-radius: 50%;
}
.zuojiao{
position: absolute;
top: 550px;
left: 300px;
transform: rotateZ(20deg);
}
.youjiao{
position: absolute;
top: 550px;
left: 500px;
transform: rotateZ(-20deg);
}
