<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>android</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div.head{
margin-top: 100px;
margin-left: 200px;
width: 200px;
height: 100px;
background: greenyellow;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: relative;
}
div.head:after{
content:"";
position: absolute;
top: 50px;
left: 50px;
width: 20px;
height: 20px;
background: white;
border-radius: 10px;
}
div.head:before{
content:"";
position: absolute;
top: 50px;
right: 50px;
width: 20px;
height: 20px;
background: white;
border-radius: 10px;
}
div.left-ear{
width: 10px;
height: 50px;
background: greenyellow;
position: absolute;
left: 30px;
top: -30px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
}
div.right-ear{
width: 10px;
height: 50px;
background: greenyellow;
position: absolute;
right: 30px;
top: -30px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
}
div.body{
width: 200px;
height: 200px;
background: greenyellow;
margin-top: 10px;
margin-left: 200px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
position: relative;
perspective: 500px;
}
div.body:after{
content:"";
position: absolute;
top:0;
left: -40px;
width: 30px;
height: 130px;
background: greenyellow;
border-radius: 20px;
}
div.body:before{
content:"";
position: absolute;
top:0;
right: -40px;
width: 30px;
height: 130px;
background: greenyellow;
border-radius: 20px;
}
div.body_1{
width: 70px;
height: 70px;
background: white;
position: absolute;
top: 40px;
left: 77px;
box-shadow: 0px 0px 50px #ADFF2F;
transform: rotateY(50deg) rotate(45deg) translateY(10px);
-webkit-transform: rotateX(50deg) rotate(45deg) translateY(10px);
-moz-transform: rotateX(50deg) rotate(45deg) translateY(10px);
}
div.body_2{
width: 50px;
height: 50px;
background: white;
position: absolute;
top: 100px;
left: 50px;
transform: skewY(34deg);
}
div.body_3{
width: 50px;
height: 50px;
background: white;
position: absolute;
top: 100px;
right: 40px;
transform: skewY(-34deg);
}
div.left_foot{
width: 30px;
height: 100px;
background: greenyellow;
position: absolute;
top:150px;
left:20px;
border-radius: 20px;
z-index: -1;
}
div.right_foot{
width: 30px;
height: 100px;
background: greenyellow;
position: absolute;
top:150px;
right:20px;
border-radius: 20px;
z-index: -1;
}
@-webkit-keyframes eye{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
@keyframes eye{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div.body:hover{
-webkit-animation-name: eye;
-webkit-animation-duration: 1s;
animation-name: eye;
animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;;
}
</style>
</head>
<body>
<div class="head">
<div class="left-ear"></div>
<div class="right-ear"></div>
</div>
<div class="body">
<div class="body_1"></div>
<div class="body_2"></div>
<div class="body_3"></div>
<div class="left_foot"></div>
<div class="right_foot"></div>
</div>
</body>
</html>
