围巾网站css模板,用纯css3和HTML5写出戴花围巾吃柠檬味棒棒糖的企鹅

用纯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);

}