css3畫圖之大白(●—●)
<!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;
left: 30px;
top: 36px;
width: 50px;
height: 1px;
background: #000;
}
@keyframes eye {
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-keyframes eye {
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>
<div class="wrap">
<div class="background">
<div class="background_box1"></div>
<div class="background_box2"></div>
<div class="background_box3"></div>
<div class="background_box4"></div>
<div class="background_box5"></div>
<div class="background_line1"></div>
<div class="background_line2"></div>
</div>
<div class="body">
<div class="cpu">
<div class="heart"></div>
</div>
<div class="head">
<div class="eye1"></div>
<div class="eye2"></div>
<div class="eyeline"></div>
</div>
<div class="trunk">
<div class="trunk1"></div>
<div class="trunk2"></div>
<div class="trunk3"></div>
</div>
<div class="hand">
<div class="hand1"></div>
<div class="hand2"></div>
<div class="hand3"></div>
<div class="hand4"></div>
<div class="finger1"></div>
<div class="finger2"></div>
<div class="finger3"></div>
<div class="finger4"></div>
</div>
<div class="foot">
<div class="foot1"></div>
<div class="foot2"></div>
</div>
</div>
</div>
</body>
</html>
WEB前端學習交流群21 598399936
css3畫圖之大白(●—●)