html5报纸,HTML5 CSS3 读报纸的小老虎

CSS

语言：

CSSSCSS

确定

body {

background: #E8DAB2;

}

.container {

position: absolute;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 200px;

height: 300px;

}

.head {

z-index: 1;

position: absolute;

width: 200px;

height: 200px;

background: #DD6E42;

border-radius: 100px;

}

.ear {

position: absolute;

width: 50px;

height: 50px;

background: #DD6E42;

border-radius: 70% 100% 100% 100%;

}

.ear.right {

left: 150px;

border-radius: 100% 70% 100% 100%;

}

.inner {

position: absolute;

top: 7px;

left: 6px;

width: 30px;

height: 30px;

background: #F7C4A5;

border-radius: 70% 100% 100% 100%;

}

.inner.right {

left: 10px;

border-radius: 100% 70% 100% 100%;

}

.face {

position: absolute;

left: 10px;

}

.eye {

position: absolute;

top: 120px;

left: 66px;

width: 10px;

height: 10px;

background: #333;

border-radius: 100%;

}

.eye.right {

left: 110px;

}

.nose {

position: absolute;

top: 119px;

left: 82px;

width: 25px;

height: 25px;

background: #A15131;

border-radius: 100%;

}

.mouth {

position: absolute;

top: 130px;

left: 70px;

width: 30px;

height: 30px;

background: #FFF;

border-radius: 100%;

}

.mouth:before {

content: '';

position: absolute;

left: 20px;

width: 30px;

height: 30px;

background: #FFF;

border-radius: 100%;

}

.stripe.one {

position: absolute;

top: 80px;

left: 2px;

width: 40px;

height: 10px;

background: #000;

border-radius: 3px 100% 0 0;

}

.stripe.two {

position: absolute;

top: 100px;

left: 2px;

width: 37px;

height: 10px;

background: #000;

border-radius: 3px 100% 0 0;

}

.stripe.three {

position: absolute;

top: 120px;

left: 5px;

width: 30px;

height: 10px;

background: #000;

border-radius: 3px 100% 0 7px;

}

.stripe.four {

position: absolute;

top: 80px;

left: 158px;

width: 40px;

height: 10px;

background: #000;

border-radius: 100% 3px 0 0;

}

.stripe.five {

position: absolute;

top: 100px;

left: 162px;

width: 37px;

height: 10px;

background: #000;

border-radius: 100% 3px 0 0;

}

.stripe.six {

position: absolute;

top: 120px;

left: 166px;

width: 30px;

height: 10px;

background: #000;

border-radius: 100% 3px 7px 0;

}

.stripe.seven {

z-index: 1;

position: absolute;

top: 3px;

left: 76px;

width: 10px;

height: 40px;

background: #000;

border-radius: 3px 10px 150% 0;

}

.stripe.eight {

z-index: 1;

position: absolute;

top: 1px;

left: 95px;

width: 10px;

height: 40px;

background: #000;

border-radius: 3px 10px 150% 0;

}

.stripe.nine {

z-index: 1;

position: absolute;

top: 3px;

left: 116px;

width: 10px;

height: 40px;

background: #000;

border-radius: 3px 10px 150% 0;

}

.hair {

position: absolute;

top: 1px;

left: 70px;

background: #DD6E42;

width: 20px;

height: 20px;

border-radius: 100% 0 100% 100%;

transform: rotate(-20deg);

}

.hair.two {

left: 80px;

}

.hair.three {

left: 90px;

}

.newspaper {

z-index: 1;

position: absolute;

top: 180px;

left: -40px;

width: 150px;

height: 200px;

background: #CCC;

}

.newspaper.two {

position: absolute;

left: 110px;

content: '';

width: 150px;

height: 200px;

background: #BBB;

}

.headline {

opacity: 0.6;

position: absolute;

top: 30px;

left: 10px;

background: #999;

width: 120px;

height: 10px;

}

.headline.two {

top: 50px;

left: 25px;

}

.headline.picture {

width: 100px;

height: 60px;

top: 76px;

left: 25px;

}

.hand {

z-index: 3;

position: absolute;

top: 270px;

left: -55px;

width: 30px;

height: 30px;

border-radius: 100%;

background: #DD6E42;

}

.headline.a {

opacity: 0.6;

position: absolute;

top: 50px;

left: 20px;

background: #999;

width: 120px;

height: 10px;

}

.headline.b {

top: 70px;

left: 20px;

}

.hand.right {

left: 240px;

}