SCSS
$white: #FBFEF9;
$black: #191923;
$blue: #5EABFF;
$background: #C8C8CD;
@mixin dim($x,$y, $r){
position: absolute;
width: $x;
height: $y;
-moz-border-radius: $r;
-webkit-border-radius: $r;
-o-border-radius: $r;
-ms-border-radius: $r;
border-radius: $r;
}
body{
background: $background;
}
.container{
position: relative;
margin: auto;
display: block;
margin-top: 4%;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient($blue, $black);
}
.eve{
@include dim(40%, 70%, 0);
left: 30%;
top: 15%;
}
.head{
@include dim(80%, 30%, 120px 120px 50% 50%/100px 100px 50px 50px);
background: $white;
left: 10%;
box-shadow: inset 2px 0 7px 1px shade($white, 50%), inset 0 0 20px 5px $white, inset 10px -10px 60px 2px shade($white, 50%);
&:before{
@include dim(70%, 60%, 200px 200px 100% 100%);
content: ' ';
background: $black;
bottom: 10%;
left: 15%;
box-shadow: 0 0 0 1px $white;
}
}
.eye-left, .eye-right{
@include dim(20%, 20%, 50%);
background: repeating-linear-gradient(-10deg, $blue 4px, shade($blue, 30%) 7px);
bottom: 28%;
box-shadow: 0 0 5px 0 $blue;
}
.eye-left{
left: 25%;
transform: rotate(10deg);
}
.eye-right{
right: 25%;
transform: scaleX(-1) rotate(10deg);
}
.body{
@include dim(80%, 68%, 40px 40px 100% 90%/ 90% 90% 100% 100%);
background: $white;
bottom: 0;
left: 10%;
box-shadow: inset 2px 0 7px 1px shade($white, 50%), inset 0 0 20px 5px $white, inset 10px -10px 60px 2px shade($white, 50%);
overflow: hidden;
&:before, &:after{
@include dim(30%, 100%, 50%);
content: ' ';
background: rgba(shade($white, 50%), .2);
top: 0%;
}
&:before{
left: -16%;
}
&:after{
right: -16%;
}
}
.arm-left, .arm-right{
@include dim(12%, 54%, 400% 0 0 700%/ 300px 0 0 600%);
background: $white;
bottom: 12%;
box-shadow: inset 2px 0 7px 1px shade($white, 50%), inset 0 0 20px 5px $white, inset 10px -10px 30px 2px shade($white, 50%);
}
.arm-left{
left: -6%;
transform: rotate(5deg);
}
.arm-right{
right: -6%;
transform: scaleX(-1) rotate(5deg);
}
