<!DOCTYPE html>
<html>
<head>
<title>大白</title>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<styletype="text/css">
*,body {
margin:0;
padding:0;
}
.wrap{
width:480px;
height:700px;
position:relative;
}
.background{
width:480px;
height:700px;
position:absolute;
background:#597370;
overflow:hidden;
}
.background_box1{
width:300px;
height:50px;
margin:0 auto;
border:4px solid #394946;
border-top:none;
box-shadow:0 -1px 5px rgba(0,0,0,1);
}
.background_box2{
width:300px;
height:80px;
margin:0 auto;
border:4px solid #394946;
box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;
background:#394946;
}
.background_box3{
position:relative;
width:300px;
height:300px;
margin:0 auto;
border:4px solid #394946;
box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;
background:#394946;
}
.background_box3:after{
content:"";
position:absolute;
width:95%;
height:97%;
margin:1%;
border:4px solid #394946;
background:#2f3f4e;
}
.background_box4{
width:100%;
height:80px;
margin:2px auto;
border-top:4px solid #394946;
border-bottom:4px solid #394946;
box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;
background:#2c3733;
}
.background_box5{
width:100%;
height:15px;
margin:0 auto;
box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;
background:#2c3733;
}
.background_line1{
position:absolute;
left:-41px;
top:625px;
width:165px;
height:3px;
margin:0 auto;
-webkit-transform:rotate(-240deg);
-moz-transform:rotate(-240deg);
-o-transform:rotate(-240deg);
transform:rotate(-240deg);
background:rgba(0,0,0,0.3);
}
.background_line2{
position:absolute;
left:353px;
top:625px;
width:165px;
height:3px;
margin:0 auto;
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
background:rgba(0,0,0,0.3);
}
.body{
width:480px;
height:700px;
position:absolute;
}
.cpu{
position:absolute;
left:270px;
top:170px;
width:30px;
height:30px;
background:#E4E4E4;
border-radius:70% 100%;
box-shadow:0px 2px 3px rgba(0,0,0,0.2),0px 2px 3px rgba(255,255,255,1) inset;
z-index:2;
}
.heart{
width:16px;
height:20px;
position:relative;
}
.heart:before{
position:absolute;
left:10px;
top:10px;
content:"";
width:8px;
height:12px;
border:0 solid transparent;
border-radius:25px 10px 0 0;
background:#E24C4C;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.heart:after{
position:absolute;
left:14px;
top:10px;
content:"";
width:8px;
height:12px;
border: 0 solid transparent;
border-radius:10px 25px 0 0;
background:#E24C4C;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.head{
position:absolute;
left:177px;
top:67px;
width:110px;
height:76px;
border-radius:50% 45%;
box-shadow:0 10px 5px rgba(0,0,0,0.2);
background:-webkit-linear-gradient(top, #fff 30%, #d6d6d6);
z-index:2;
}
.eye1{
position:absolute;
left:20px;
top:30px;
width:12px;
height:12px;
border-radius:100%;
background:#000;
-webkit-animation:eye 2s ease infinite;
-moz-animation:eye 2s ease infinite;
-o-animation:eye 2s ease infinite;
animation:eye 2s ease infinite;
}
.eye2{
position:absolute;
left:76px;
top:30px;
width:12px;
height:12px;
border-radius:100%;
background:#000;
-webkit-animation:eye 2s ease infinite;
-moz-animation:eye 2s ease infinite;
-o-animation:eye 2s ease infinite;
animation:eye 2s ease infinite;
}
.eyeline{
position:absolute;
left:30px;
top:36px;
width:50px;
height:1px;
background:#000;
}
@keyframeseye {
0%,20%,100%{
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
-moz-transform:scale(1,0.2);
-o-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
@-webkit-keyframeseye {
0%,20%,100%{
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
-moz-transform:scale(1,0.2);
-o-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
.trunk{
position:absolute;
left:106px;
top:100px;
z-index:1;
}
.trunk1{
position:absolute;
left:27px;
top:19px;
width:50px;
height:64px;
border:79px solid #eee;
background:#eee;
border-radius:100%;
}
.trunk2{
position:absolute;
left:22px;
top:100px;
width:100px;
height:200px;
background:#eee;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
-o-transform:rotate(12deg);
transform:rotate(12deg);
box-shadow:-1px 1px 2px rgba(0,0,0,0.2);
}
.trunk2:after{
content:"";
position:absolute;
left:113px;
top:-27px;
width:100px;
height:200px;
background:#eee;
-webkit-transform:rotate(-24deg);
-moz-transform:rotate(-24deg);
-o-transform:rotate(-24deg);
transform:rotate(-24deg);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.trunk3{
position:absolute;
left:0px;
top:201px;
width:260px;
height:200px;
border-radius:100%;
box-shadow:0 10px 5px rgba(0,0,0,0.2);
background:-webkit-linear-gradient(top, #eee 30%, #E4E4E4 60%, #e9e9e9 90%);
}
.hand{
}
.hand1{
position:absolute;
left:16px;
top:196px;
width: 320px;
height:143px;
border-top:76px solid #eee;
border-radius:32% 52%;
-webkit-transform:rotate(-80deg);
-moz-transform:rotate(-80deg);
-o-transform:rotate(-80deg);
transform:rotate(-80deg);
z-index:0;
}
.hand2{
position:absolute;
left:136px;
top:196px;
width:320px;
height:143px;
border-top:76px solid #eee;
border-radius:52% 32%;
-webkit-transform:rotate(80deg);
-moz-transform:rotate(80deg);
-o-transform:rotate(80deg);
transform: rotate(80deg);
z-index:0;
}
.finger1{
position:absolute;
left:88px;
top:427px;
width:20px;
height:48px;
border-radius:0 0 80% 50%;
background:#eee;
-webkit-transform:rotate(-32deg);
-moz-transform:rotate(-32deg);
-o-transform:rotate(-32deg);
transform:rotate(-32deg);
}
.finger2{
position:absolute;
left:104px;
top:426px;
width:20px;
height:43px;
border-radius:0 0 100% 45%;
background:#eee;
-webkit-transform:rotate(-32deg);
-moz-transform:rotate(-32deg);
-o-transform:rotate(-32deg);
transform:rotate(-32deg);
}
.finger3{
position:absolute;
left:364px;
top:427px;
width:20px;
height:48px;
border-radius:0 0 80% 50%;
background:#eee;
-webkit-transform:rotate(32deg);
-moz-transform:rotate(32deg);
-o-transform:rotate(32deg);
transform:rotate(32deg);
}
.finger4{
position:absolute;
left:353px;
top:426px;
width:20px;
height:43px;
border-radius:0 0 100% 45%;
background:#eee;
-webkit-transform:rotate(32deg);
-moz-transform:rotate(32deg);
-o-transform:rotate(32deg);
transform:rotate(32deg);
}
.foot{
position:absolute;
left:135px;
top:455px;
z-index:0;
}
.foot1{
position:absolute;
left:0;
top:0;
width:100px;
height:140px;
background:-webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
border-radius:10% 9% 22% 62%;
}
.foot2{
position:absolute;
left:100px;
top:0;
width:100px;
height:140px;
background:-webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
border-radius:10% 9% 62% 22%;
box-shadow:-2px 0 2px rgba(0,0,0,0.1);
}
</style>
<body>
<divclass="wrap">
<divclass="background">
<divclass="background_box1"></div>
<divclass="background_box2"></div>
<divclass="background_box3"></div>
<divclass="background_box4"></div>
<divclass="background_box5"></div>
<divclass="background_line1"></div>
<divclass="background_line2"></div>
</div>
<divclass="body">
<divclass="cpu">
<divclass="heart"></div>
</div>
<divclass="head">
<divclass="eye1"></div>
<divclass="eye2"></div>
<divclass="eyeline"></div>
</div>
<divclass="trunk">
<divclass="trunk1"></div>
<divclass="trunk2"></div>
<divclass="trunk3"></div>
</div>
<divclass="hand">
<divclass="hand1"></div>
<divclass="hand2"></div>
<divclass="hand3"></div>
<divclass="hand4"></div>
<divclass="finger1"></div>
<divclass="finger2"></div>
<divclass="finger3"></div>
<divclass="finger4"></div>
</div>
<divclass="foot">
<divclass="foot1"></div>
<divclass="foot2"></div>
</div>
</div>
</div>
</body>
</html>
写个大白温暖你~
WEB前端学习交流群21 598399936