<!DOCTYPE html>
<html>
<head>
<title>大白</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="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;