Rilakkuma Box

Adicione alguma
coisa aqui ♥

Codigo:

<style>
.twitis{
width: 250px;
    height: 220px;
    overflow: hidden;
    color: pink;
    border-radius: 10%;
 }

@-webkit-keyframes blink /* Safari and Chrome */
{
  10%   { height: 16px; top: 0; }
  30%   { height: 16px; top: 0; }
  40%  { height: 0px; top: 16px; }
  50%  { height: 0px; top: 16px; }
  60%   { height: 16px; top: 0; }
  100%   { height: 16px; top: 0; }
}

#bear-ears {
width: 300px;
    height: 95px;
    margin-bottom: -60px;
    margin-left: 205px;
}

#bear-main {
  width: 300px;
    height: 440px;
    margin: 20px auto;
}

#bear-face {
width: 290px;
    height: 200px;
    margin: auto;
    padding-top: 70px;
    z-index: 10;
}

#bear-eye-left, #bear-eye-right {
      width: 50px;
    height: 60px;
    background-color: black;
    border-radius: 40em;
    float: left;
}

#bear, #bear-ear-left, #bear-ear-right {
  background-color: #bf6506;
}
#bear-ear-left {
    margin-left: -230px;
}
#bear-ear-right {
    margin-left: 10px;
}
#bear {
    width: 300px;
    height: 450px;
    margin: 0px auto;
    border-radius: 5em;
    z-index: 8;
    position: relative;
}

#bear-ear-left, #bear-ear-right {
  width: 110px;
  height: 110px;
  border-radius: 100em;
  float: left;
}

#bear-belly {
 background-color: white;
    height: 220px;
    width: 250px;
    margin: -80px auto;
    border-radius: 9em 9em 7em 7em;
}
}


#bear-lip-left, #bear-lip-right{
  width: 30px;
  height: 12px;
  background-color: white;
  border-radius: 2em;
}

#bear-lip-left {
  -webkit-transform:rotate(140deg);
  margin: -36px 0 0 49px;
}

#bear-lip-right {
  -webkit-transform:rotate(40deg);
  margin: -12px 0 0 70px;
  
}

#bear-mouth {
  background-color: white;
  width: 150px;
  height: 110px;
  border-radius: 8em / 6em;
  margin: 0 20px;
  float: left;
}

#bear-nose {
   height: 30px;
   width: 30px;
   background-color: black;
   margin: 30px auto;
   border-radius: 1em;
}

.bear-eyeball {
    width: 30px;
    height: 35px;
    background-color: white;
    border-radius: 2em;
    margin: 25px 10px;
    position: relative;
}

.bear-ear-hole {
   border-radius: 4em;
  width: 90px;
  height: 90px;
  background-color: yellow;
  margin: 10px; 
  z-index: 7;
  position: relative;
}
</style>

  
  
<div id="bear-main">
  <div id="bear-ears">
    <div id="bear-ear-left">
      <div class="bear-ear-hole">
      </div>
    </div>
    <div id="bear-ear-right">
      <div class="bear-ear-hole">
      </div>
    </div>
  </div>    
  <div id="bear">
      <div id="bear-face">
        
        <div id="bear-eye-left">
          <div class="bear-eyeball">
          </div>
        </div>
          <div id="bear-mouth">
            <div id="bear-nose">
            </div>
            <div id="bear-lip-left">
            </div>
            <div id="bear-lip-right">
            </div>
          </div>
        <div id="bear-eye-right">
          <div class="bear-eyeball">
          </div>
        </div>
      
     </div>
    
     <div id="bear-belly">
       <div class='twitis'>
         <center>
 Adicione alguma coisa aqui &hearts;         
         </center>
       </div>
     </div>
  </div>
</div>

Original

See the Pen A cute widdle bear in CSS :D by Sam Seay (@samueljseay) on CodePen.