css小熊相框

            
            $background: #F0EFED;
$body: #a35a37;
$shadow: #7a3b1a;
$pink: #F0D0D1;
$black: #3C2114;
$sand: #ffd49d;

body {
  background-color: $background;
}
.frame {
  background-color: $pink;
  position: relative;
  margin: auto;
  display: block;
  margin-top: 10%;
  width: 350px;
  height: 420px;
  border: 20px solid white;
  box-shadow: -10px -10px 30px #CCC, inset -5px -2px 5px #A89683;
  perspective: 1000px;
}
.head {
  position: absolute;
  bottom: 1%;
  left: 15%;
  width: 70%;
  height: 90%;
  background: $body;
  border-radius: 50% / 40% 40% 0 0;
  transform: rotateX(20deg);
  z-index: 1;
}
.arm-left, .arm-right {
  position: absolute;
  width: 45%;
  height: 20%;
  border-radius: 0 50px 50px 0;
  background-color: $shadow;
  top: 70%;
}
.arm-left {
  left: 0;
  transform: skewY(5deg);
}
.arm-right {
  right: 0;
  transform: skewY(-5deg) scaleX(-1);
}
.ear-left, .ear-right {
  position: absolute;
  width: 11%;
  height: 11%;
  top: 15%;
  border-radius: 50%;
  background-color: #f0a77e;
  border: 8px solid $body;
  z-index: -1;
  content: '';
}
.ear-left {
  left: 18%;
  transform: rotate(-45deg);
}
.ear-right {
  right: 18%;
  transform: rotate(45deg);
}
.eye-left, .eye-right {
  position: absolute;
  top: 35%;
  width: 20px;
  height: 10px;
  z-index: 3;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border: 3px solid $black;
  border-top: 0;
}
.eye-left {
  left: 32%;
}
.eye-right {
  right: 32%;
}
.lashes {
  position: absolute;
  width:2px;
  height:8px;
  background-color: $black;
  bottom:-8px;
  left:48%;
  &:before, &:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:-2px;
    background-color: $black;
  }
  &:before {
    left:-10px;
    transform:rotate(20deg); 
  }
  &:after {
    left:10px;
    transform:rotate(-20deg);
  }
}
.nose {
  position: absolute;
  background: $black;
  width: 16%;
  height: 10%;
  left: 42%;
  top: 42%;
  border-radius: 50% / 100% 100% 30% 30%;
  z-index: 4;
}
.muzzle {
  position: absolute;
  width: 25%;
  height: 13%;
  border-radius: 50px 10px 0px 50px;
  top: 45%;
  left: 27%;
  background-color: $sand;
  z-index: 2;
  transform: rotate(-10deg);
}
.muzzle:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px 10px 0px 50px;
  bottom:5%;
  left: -25%;
  background-color: $sand;
  transform: rotate(20deg) scaleX(-1);
  transform-origin :100% 100%;
}
.whiskers-left {
    width: 30%;
    height:2px;
    position: absolute;
    z-index: 2;
    top: 48%;
    left:10%;
    background-color: $shadow;
    transform: rotate(10deg);
    &:before, &:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background-color: $shadow;
  }
  &:before {
      left:5px;
      top:30px;
      transform: rotate(-20deg); 
  }
  &:after {
      left:2px;
      top:15px;
      transform: rotate(-10deg);  
  }
}
.whiskers-right {
    width: 30%;
    height:2px;
    position: absolute;
    z-index: 2;
    top: 48%;
    right:10%;
    background-color: $shadow;
    transform: rotate(-10deg);
    &:before, &:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background-color: $shadow;
  }
  &:before {
    right:5px;
    top:30px;
    transform: rotate(20deg);  
  }
  &:after {
    right:2px;
    top:15px;
    transform: rotate(10deg); 
  }
}
.teeth {
  position: absolute;
  background: white;
  width: 44px;
  height: 40px;
  left: 44%;
  top: 53%;
  border-radius: 5px;
  z-index: 1;
}
.teeth:after {
  position: absolute;
  content: '';
  background-color: $black;
  width: 2px;
  height: 100%;
  left: 20px;
}
.heart {
  position: absolute;
  width: 100px;
  height: 90px;
  top:65%;
  left:18%;
}
.heart:before, .heart:after {
  position: absolute;
  content: '';
  left: 80px;
  top: 0%;
  width: 80px;
  height: 120px;
  background: $pink;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
.bow{
    position: absolute;
    width: 30px;
    height: 25px;
    top: 8%;
    background: $pink;
    right: 25%;
    border-radius: 50% 15% 15% 50%;
    transform:rotate(10deg)
}
.bow:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: $pink;
  border-radius: 15% 50% 50% 15%;
  left:-30px;
}