HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小丸子一家</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main">
<div class="me">
<div class="hairs">
<div class="hair hair1"></div>
<div class="hair hair2"></div>
<div class="hair hair3"></div>
<div class="hair hair4"></div>
<div class="hair hair5"></div>
<div class="hair hair6"></div>
<div class="hair hair7"></div>
</div>

<div class="face">
<div class="brow left-brow"></div>
<div class="brow right-brow"></div>
<div class="eye left-eye"></div>
<div class="eye right-eye"></div>

<div class="blusher left-blusher"></div>
<div class="blusher right-blusher"></div>

<div class="mouth"></div>

<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
</div>

<div class="clothes">
<div class="collar left-collar"></div>
<div class="collar right-collar"></div>
<div class="straps left-straps"></div>
<div class="straps right-straps"></div>
</div>

<div class="arm left-arm"></div>
<div class="arm right-arm"></div>

<div class="belt"></div>
<div class="skirt">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
</div>
<div class="leg left-leg"></div>
<div class="leg right-leg"></div>

<div class="stockings left-stockings"></div>
<div class="stockings right-stockings"></div>

<div class="shoes left-shoes"></div>
<div class="shoes right-shoes"></div>
</div>

<div class="grandpa">
<div class="hairs">
<div class="hair hair1"></div>
<div class="hair hair2"></div>
<div class="hair hair3"></div>
<div class="hair hair4"></div>
<div class="hair hair5"></div>
</div>
<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
<div class="header">

<div class="bangs">
<div class="bang bang1"></div>
<div class="bang bang2"></div>
<div class="bang bang3"></div>
</div>

<div class="wrinkle wrinkle1"></div>
<div class="wrinkle wrinkle2"></div>

<div class="brow left-brow"></div>
<div class="brow right-brow"></div>

<div class="eye left-eye"></div>
<div class="eye right-eye"></div>

<div class="nose"></div>

<div class="mouth"></div>
</div>

<div class="clothes">
<div class="collar"></div>
<div class="cover"></div>
</div>
<div class="hand"></div>

<div class="trousers"></div>
<div class="footer left-footer"></div>
<div class="footer right-footer"></div>
<div class="shoes left-shoes"></div>
<div class="shoes right-shoes"></div>

</div>

</div>
</body>
</html>

CSS代码

@-webkit-keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/* line 13, main.less */
body {
background: #ffef5e;
}
/* line 16, main.less */
body,
div {
margin: 0;
padding: 0;
background: #ffef5e;
}
/* line 21, main.less */
.border {
border: 1px solid #152131;
}
/* line 24, main.less */
.main {
position: relative;
width: 700px;
margin: 50px auto;
}
/* line 29, main.less */
.me {
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
}
/* line 34, main.less */
.me .hairs {
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
}
/* line 43, main.less */
.me .hairs:after {
content: '';
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
/* line 51, main.less */
.me .hairs .hair {
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
-webkit-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
-ms-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
}
/* line 58, main.less */
.me .hairs .hair.hair1 {
top: 17px;
left: 27px;
}
/* line 62, main.less */
.me .hairs .hair.hair2 {
top: 8px;
left: 52px;
}
/* line 66, main.less */
.me .hairs .hair.hair3 {
top: 4px;
left: 73px;
}
/* line 70, main.less */
.me .hairs .hair.hair4 {
top: 0;
left: 90px;
}
/* line 74, main.less */
.me .hairs .hair.hair5 {
top: 4px;
left: 108px;
}
/* line 78, main.less */
.me .hairs .hair.hair6 {
top: 8px;
left: 125px;
}
/* line 82, main.less */
.me .hairs .hair.hair7 {
top: 17px;
right: 17px;
}
/* line 88, main.less */
.me .face {
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
border: 1px solid #152131;
}
/* line 95, main.less */
.me .face:after {
content: "";
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
border: 1px solid #152131;
}
/* line 107, main.less */
.me .face .brow {
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
}
/* line 114, main.less */
.me .face .brow:after {
content: "";
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
/* line 123, main.less */
.me .face .brow.left-brow {
left: 18px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 127, main.less */
.me .face .brow.right-brow {
right: 14px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 132, main.less */
.me .face .eye {
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
}
/* line 140, main.less */
.me .face .eye.left-eye {
left: 32%;
}
/* line 143, main.less */
.me .face .eye.right-eye {
right: 32%;
}
/* line 148, main.less */
.me .face .blusher {
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
}
/* line 155, main.less */
.me .face .blusher.left-blusher {
left: 8px;
}
/* line 158, main.less */
.me .face .blusher.right-blusher {
right: 8px;
}
/* line 162, main.less */
.me .face .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
}
/* line 172, main.less */
.me .face .mouth:after {
content: "";
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
/* line 183, main.less */
.me .face .ear {
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
}
/* line 190, main.less */
.me .face .ear.left-ear {
left: -11px;
border-radius: 5px 0 0 10px;
}
/* line 194, main.less */
.me .face .ear.right-ear {
right: -11px;
border-radius: 0 5px 10px 0;
}
/* line 200, main.less */
.me .clothes {
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top: 112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
border: 1px solid #152131;
}
/* line 211, main.less */
.me .clothes .sleeve {
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
/* line 231, main.less */
.me .clothes .collar {
z-index: 3;
position: absolute;
border: 1px solid #152131;
width: 20px;
height: 10px;
background: #fff;
}
/* line 238, main.less */
.me .clothes .collar.left-collar {
left: 12px;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
/* line 242, main.less */
.me .clothes .collar.right-collar {
right: 12px;
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
/* line 247, main.less */
.me .clothes .straps {
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
border: 1px solid #152131;
}
/* line 254, main.less */
.me .clothes .straps.left-straps {
left: 12px;
}
/* line 257, main.less */
.me .clothes .straps.right-straps {
right: 12px;
}
/* line 262, main.less */
.me .arm {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
border: 1px solid #152131;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
}
/* line 272, main.less */
.me .arm.left-arm {
left: 10px;
}
/* line 274, main.less */
.me .arm.left-arm:after {
content: "";
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 286, main.less */
.me .arm.right-arm {
left: 52px;
}
/* line 288, main.less */
.me .arm.right-arm:after {
content: "";
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 301, main.less */
.me .belt {
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
/* line 311, main.less */
.me .skirt {
background: #ed023a;
background: none;
border-color: #e9003a transparent;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
}
/* line 326, main.less */
.me .skirt .line {
width: 1px;
height: 30px;
position: absolute;
background: #000;
top: 10px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 333, main.less */
.me .skirt .line.line1 {
left: 10px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 337, main.less */
.me .skirt .line.line2 {
left: 25px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 341, main.less */
.me .skirt .line.line3 {
left: 35px;
}
/* line 344, main.less */
.me .skirt .line.line4 {
right: 25px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 348, main.less */
.me .skirt .line.line5 {
right: 10px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 354, main.less */
.me .leg {
width: 12px;
height: 40px;
background: #fadbc7;
border: 1px solid #152131;
position: absolute;
top: 220px;
z-index: 2;
}
/* line 362, main.less */
.me .leg.left-leg {
left: 40px;
}
/* line 365, main.less */
.me .leg.right-leg {
left: 78px;
}
/* line 368, main.less */
.me .leg:after {
content: '';
width: 12px;
height: 16px;
background: #fff;
border: 1px solid #152131;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
/* line 380, main.less */
.me .stockings {
width: 28px;
height: 12px;
background: #fff;
border: 1px solid #152131;
position: absolute;
z-index: 1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 388, main.less */
.me .stockings.left-stockings {
left: 21px;
top: 275px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 394, main.less */
.me .stockings.right-stockings {
left: 83px;
top: 265px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 401, main.less */
.me .shoes {
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: 50%;
}
/* line 409, main.less */
.me .shoes.left-shoes {
left: 13px;
top: 280px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 415, main.less */
.me .shoes.right-shoes {
left: 81px;
top: 267px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 424, main.less */
.grandpa {
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
}
/* line 430, main.less */
.grandpa .hairs {
position: absolute;
z-index: 3;
width: 126px;
}
/* line 435, main.less */
.grandpa .hairs .hair {
background: #152131;
width: 1px;
height: 5px;
position: absolute;
}
/* line 440, main.less */
.grandpa .hairs .hair.hair1 {
left: 40px;
top: 12px;
}
/* line 444, main.less */
.grandpa .hairs .hair.hair2 {
left: 50px;
top: 8px;
}
/* line 448, main.less */
.grandpa .hairs .hair.hair3 {
left: 62px;
top: 5px;
}
/* line 452, main.less */
.grandpa .hairs .hair.hair4 {
right: 50px;
top: 8px;
}
/* line 456, main.less */
.grandpa .hairs .hair.hair5 {
right: 40px;
top: 12px;
}
/* line 462, main.less */
.grandpa .ear {
width: 20px;
height: 20px;
background: #f8bb9f;
border: 1px solid #152131;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
}
/* line 471, main.less */
.grandpa .ear.left-ear {
left: -10px;
}
/* line 474, main.less */
.grandpa .ear.right-ear {
right: -10px;
}
/* line 478, main.less */
.grandpa .header {
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
border: 1px solid #152131;
}
/* line 488, main.less */
.grandpa .header:after {
background: #f8bb9f;
bottom: -12px;
content: "";
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
border: 1px solid #152131;
}
/* line 499, main.less */
.grandpa .header .bang {
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
}
/* line 506, main.less */
.grandpa .header .bang.bang1 {
left: 50px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 510, main.less */
.grandpa .header .bang.bang2 {
left: 63px;
}
/* line 513, main.less */
.grandpa .header .bang.bang3 {
right: 50px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 518, main.less */
.grandpa .header .wrinkle {
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
}
/* line 523, main.less */
.grandpa .header .wrinkle.wrinkle1 {
top: 30px;
width: 30px;
left: 48px;
}
/* line 528, main.less */
.grandpa .header .wrinkle.wrinkle2 {
top: 40px;
width: 20px;
left: 53px;
}
/* line 534, main.less */
.grandpa .header .brow {
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
}
/* line 541, main.less */
.grandpa .header .brow:after {
content: "";
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
/* line 551, main.less */
.grandpa .header .brow.left-brow {
left: 20px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 555, main.less */
.grandpa .header .brow.right-brow {
left: 67px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 560, main.less */
.grandpa .header .eye {
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;
}
/* line 568, main.less */
.grandpa .header .eye:after {
content: "";
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
/* line 578, main.less */
.grandpa .header .eye.left-eye {
left: 20px;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/* line 583, main.less */
.grandpa .header .eye.right-eye {
left: 80px;
top: 79px;
-webkit-transform: rotate(-40deg) rotateY(160deg);
transform: rotate(-40deg) rotateY(160deg);
}
/* line 589, main.less */
.grandpa .header .nose {
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
border: 1px solid #152131;
border-radius: 50%;
}
/* line 599, main.less */
.grandpa .header .nose:after {
content: "";
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
/* line 609, main.less */
.grandpa .header .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
}
/* line 619, main.less */
.grandpa .header .mouth:after {
content: "";
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
/* line 632, main.less */
.grandpa .clothes {
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
border: 1px solid #152131;
}
/* line 642, main.less */
.grandpa .clothes .cover {
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
/* line 651, main.less */
.grandpa .clothes .collar {
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
}
/* line 659, main.less */
.grandpa .clothes .collar:after {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
border: 1px solid #152131;
z-index: 5;
}
/* line 673, main.less */
.grandpa .hand {
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
/* line 685, main.less */
.grandpa .trousers {
border: 1px solid #152131;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
}
/* line 693, main.less */
.grandpa .trousers:after {
content: "";
-webkit-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
-ms-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
/* line 705, main.less */
.grandpa .footer {
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
}
/* line 711, main.less */
.grandpa .footer.left-footer {
width: 25px;
left: 16px;
}
/* line 715, main.less */
.grandpa .footer.right-footer {
left: 84px;
}
/* line 719, main.less */
.grandpa .shoes {
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
}
/* line 725, main.less */
.grandpa .shoes.left-shoes {
border-radius: 50% 0 30% 50%;
left: -4px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 730, main.less */
.grandpa .shoes.right-shoes {
border-radius: 0 50% 50% 30%;
left: 84px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}

less代码

@keyframes eye {
0% {
transform:scale(1,1);
}
20% {
transform:scale(1,0.1);
}

100% {
transform:scale(1,1);
}
}
body{
background: #ffef5e;
}
body,div{
margin: 0;
padding: 0;
background: #ffef5e;
}
.border{
border:1px solid #152131;
}
.main{
position: relative;
width: 700px;
margin: 50px auto;
}
.me{
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
.hairs{
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
&:after{
content: '';
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
.hair{
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
&.hair1{
top: 17px;
left: 27px;
}
&.hair2{
top: 8px;
left: 52px;
}
&.hair3{
top: 4px;
left: 73px;
}
&.hair4{
top: 0;
left: 90px;
}
&.hair5{
top: 4px;
left:108px;
}
&.hair6{
top: 8px;
left: 125px;
}
&.hair7{
top: 17px;
right: 17px;
}
}
}
.face{
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
&:after{ //脖子
content: "";
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom:-12px;
left: 50%;
margin-left: -7px;
.border;
}
.border;
.brow{
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
&:after{
content: "";
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
&.left-brow{
left : 18px;
transform:rotate(-10deg);
}
&.right-brow{
right: 14px;
transform:rotate(10deg);
}
}
.eye{
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
&.left-eye{
left: 32%;
}
&.right-eye{
right: 32%;
//animation: eye 1s infinite ease;
}
}
.blusher{
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
&.left-blusher{
left: 8px;
}
&.right-blusher{
right: 8px;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
&:after{
content: "";
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
}
.ear{
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
&.left-ear{
left: -11px;
border-radius: 5px 0 0 10px;
}
&.right-ear{
right: -11px;
border-radius: 0 5px 10px 0;
}
}
}
.clothes{
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top:112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
.border;
.sleeve{
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
// &:before{ //左袖子
// content: "";
// .sleeve;
// left: -10px;
// transform:rotate(50deg);
// }
// &:after{ //右袖子
// content :"";
// .sleeve;
// right: -10px;
// transform:rotate(-50deg);
// }
.collar{
z-index: 3;
position: absolute;
.border;
width: 20px;
height: 10px;
background: #fff;
&.left-collar{
left: 12px;
transform:rotate(50deg);
}
&.right-collar{
right: 12px;
transform:rotate(-50deg);
}
}
.straps{
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
.border;
&.left-straps{
left: 12px;
}
&.right-straps{
right: 12px;
}
}
}
.arm{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
.border;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
&.left-arm{
left: 10px;
&:after{
content: "";
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
.border;
}
}
&.right-arm{
left: 52px;
&:after{
content: "";
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
.border;
}
}
}
.belt{
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
.skirt{
background: #ed023a;
position: absolute;
background: none;
border-color: #e9003a transparent;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
.line{
width: 1px;
height: 30px;
position: absolute;
background: #000;
top:10px;
transform-origin:0 0;
&.line1{
left: 10px;
transform:rotate(20deg);
}
&.line2{
left: 25px;
transform:rotate(10deg);
}
&.line3{
left: 35px;
}
&.line4{
right: 25px;
transform:rotate(-10deg);
}
&.line5{
right: 10px;
transform:rotate(-20deg);
}
}
}
.leg{
width: 12px;
height: 40px;
background: #fadbc7;
.border;
position: absolute;
top: 220px;
z-index: 2;
&.left-leg{
left: 40px;
}
&.right-leg{
left: 78px;
}
&:after{
content: '';
width: 12px;
height: 16px;
background: #fff;
.border;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
}
.stockings{
width: 28px;
height: 12px;
background: #fff;
.border;
position: absolute;
z-index: 1;
transform-origin:0 0;
&.left-stockings{
left: 21px;
top: 275px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-stockings{
left: 83px;
top: 265px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
.shoes{
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
transform-origin:0 0;
border-radius: 50%;
&.left-shoes{
left: 13px;
top: 280px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-shoes{
left: 81px;
top: 267px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
}

.grandpa{
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
.hairs{
position: absolute;

z-index: 3;
width: 126px;
.hair{
background: #152131;
width: 1px;
height: 5px;
position: absolute;
&.hair1{
left: 40px;
top: 12px;
}
&.hair2{
left: 50px;
top: 8px;
}
&.hair3{
left: 62px;
top: 5px;
}
&.hair4{
right: 50px;
top: 8px;
}
&.hair5{
right: 40px;
top: 12px;
}
}
}
.ear{
width: 20px;
height: 20px;
background: #f8bb9f;
.border;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
&.left-ear{
left: -10px;
}
&.right-ear{
right: -10px;
}
}
.header{
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
.border;
&:after{
background: #f8bb9f;
bottom: -12px;
content: "";
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
.border;
}
.bang{
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
&.bang1{
left: 50px;
transform:rotate(-20deg);
}
&.bang2{
left: 63px;
}
&.bang3{
right:50px;
transform:rotate(20deg);
}
}
.wrinkle{
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
&.wrinkle1{
top: 30px;
width:30px;
left: 48px;
}
&.wrinkle2{
top: 40px;
width:20px;
left: 53px;
}
}
.brow{
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
&:after{
content: "";
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
&.left-brow{
left: 20px;
transform:rotate(10deg);
}
&.right-brow{
left: 67px;
transform:rotate(10deg);
}
}
.eye{
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;

&:after{
content: "";
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
&.left-eye{
left: 20px;
transform:rotate(30deg);

}
&.right-eye{
left: 80px;
top: 79px;
transform: rotate(-40deg) rotateY(160deg);
}
}
.nose{
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
.border;
border-radius: 50%;
&:after{
content: "";
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
&:after{
content: "";
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
}
}

.clothes{
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
.border;
.cover{
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
.collar{
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
&:after{
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
.border;
z-index: 5;
}
}
}
.hand{
.border;
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
.trousers{
.border;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
&:after{
content: "";
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
height: 100px;
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
}
.footer{
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
&.left-footer{
width: 25px;
left: 16px;
}
&.right-footer{
left: 84px;
}
}
.shoes{
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
&.left-shoes{
border-radius: 50% 0 30% 50%;
left: -4px;
transform:rotate(-10deg);
}
&.right-shoes{
border-radius: 0 50% 50% 30%;
left: 84px;
transform:rotate(10deg);
}
}
}

div+css3实现的小丸子和爷爷的更多相关文章

  1. div+css3实现漂亮的多彩标签云，鼠标移动会有动画

    div+css3实现漂亮的多彩标签云,鼠标移动会有动画 点击运行效果 <style> .dict { margin: 20px 0;clear:both ;text-align:left; ...

  2. 好程序员分享DIV+CSS3和html5+CSS3有什么区别

    DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而 ...

  3. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  4. 一言不合敲代码（1）——DIV+CSS3制作哆啦A梦头像

    先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...

  5. div+css3绘制基本图形

    基本图形包括:矩形.圆角矩形.圆形.椭圆形.三角形.值线.弧 这些图形的绘制用到了CSS圆角属性,不考虑IE8. 下面的实现在chrome浏览器运行通过. 1.矩形 比较简单,通过CSS设置宽度.高度 ...

  6. div+css3列布局，带详尽注释

    直接看代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. 实现卡片效果【DIV+CSS3】

    一.文字卡片效果 <html> <head> meta<charset="utf-8"> <title>文字卡片效果</tit ...

  8. 【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

    原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了. 且细节相当到位.所以我就fork了一下,在此我也分享一下.同时,我也 ...

  9. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

随机推荐

  1. Dockerfile 指令

    FROM 格式为 FROM <image>或FROM <image>:<tag> 第一条指令必须为 FROM 指令.并且,如果在同一个Dockerfile中创建多个 ...

  2. C# Hook钩子实例代码之截取键盘输入，需要的朋友可以参考下

    一.关于本文 以最通俗的语言说明钩子的使用方法,具体到钩子的详细介绍可以参照下面的网址: http://www.microsoft.com/china/community/program/origin ...

  3. IE 9渲染overflow的bug及解决

    问题: table父级元素div设置overflow:auto, 当触发table中的checkbox,dropdownlist事件控件时,父级div高度会自动增加(在底部增加空白行). 解决方案: ...

  4. 【Android 界面效果23】LayoutInflater作用及使用

    作用:  1.对于一个没有被载入或者想要动态载入的界面, 都需要使用inflate来载入. 2.对于一个已经载入的Activity, 就可以使用实现了这个Activiyt的的findViewById方 ...

  5. 源自梦想 eclipse快捷键整理

        Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) ...

  6. MFC简易画图

    开发一个MFC绘图程序,基于"文档-视图"结构,在客户区能够完成: ①画直线 ②画矩形 ③画圆(椭圆) ④画任意折线(右键结束) ⑤画任意多边形(右键结束,并形成闭环) 注:图形中 ...

  7. Oracle 常用命令大全

    一.如何有效地利用数据字典 ORACLE的数据字典是数据库的重要组成部分之一,它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图.数据字典名称是大写的英文字符. 数 ...

  8. springMVC+hibernate构建项目

    这几天要用到springMVC+spring+hibernate构建框架,使用的是eclipse今天闲下来把这些记录下来 首先要导入spring 的jar包和hibernate的jar包

  9. 【VMware虚拟化解决方案】 基于VMware虚拟化平台VDI整体性能分析与优化

    一.说一说 本来打算将前期项目里面出现的问题的分析思路与解决方法写出来,第一.疏导一下自己的思路,第二.分析并找出自身在技术层面所存在欠缺.但由于每个人都有一根懒经所以迟迟未动.今天突然发现51CTO ...

  10. POJ 2492 A Bug's Life (并查集)

    A Bug's Life Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 30130   Accepted: 9869 De ...