LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  • CSS
    .paint {
        width: 400px;
        margin: auto;
        overflow: hidden;
        height: 500px;
      
    }
     .paint .head{
        background: #94C147;
        height: 50px;
        width: 100px;
        border-radius: 199px 199px 1px 0px;
        margin: 50px auto;
        position: relative;
    }
    .paint .smile {
        display: block;
        margin-bottom: 8px;
        position: absolute;
        margin-top: 50px;
        background: rgba(193, 71, 177, 0.6);
        color: #fff;
        border: 0;
        padding: 4px;
        width: 76px;
        border-radius: 10px;
        margin-left: 61px;
      outline:none
    }
    .paint .sad {
        display: block;
        margin-left: 259px;
        position: absolute;
        margin-top: 50px;
        background: rgba(50, 68, 134, 0.6);
        color: #fff;
        border: 0;
        padding: 4px;
        width: 76px;
        border-radius: 10px;
       outline:none
    }
     .paint .head .eye1 {
        color: #fff;
        margin-left: 67px;
        font-size: 23px;
        margin-top: 8px;
        position: absolute;
    }
    .paint .head .eye2 {
        color: rgb(255, 255, 255);
        margin-left: 67px;
        font-size: 23px;
        margin-top: -10px;
        position: absolute;
        margin-left: 23px;
        margin-top: 8px;
    }
    .paint .head .ear1{
        background: #94c147;
        height: 23px;
        width: 4px;
        transform: rotate(150deg);
        border-radius: 10px;
        margin-left: 9px;
        position: absolute;
        margin-top: -6px;
    }
    
    .paint .head .ear2{
        background: #94c147;
        height: 23px;
        width: 4px;
        transform: rotate(25deg);
        border-radius: 10px;
        margin-left: 85px;
        position: absolute;
        margin-top: -6px;
    }
    .paint .head .mouce1{
        width: 34px;
        background: #fff;
        height: 10px;
        position: absolute;
        margin-top: 37px;
        margin-left: 33px;
        border-radius: 0px 0px 10px 10px;
        display: none;
        transition: 0.5s
    }
    .paint .head .mouce2{
        width: 34px;
        background: #fff;
        height: 10px;
        position: absolute;
        margin-top: 37px;
        margin-left: 33px;
        border-radius: 10px 10px 0px 0px;
        display: none;
        transition: 0.5s
    }
    
    .paint .head .body{
        background: #94c147;
        height: 79px;
        margin-top: 35px;
        border-radius: 0px 0px 14px 14px;
    }
    .paint .head .heart{
      width:35px;
     position: absolute;
      margin-top:-90px;
      margin-left:30px;
      display:none;
    
    }
    .paint .head .heart2{
      width:35px;
     position: absolute;
      margin-top:-90px;
      margin-left:30px;
      display:none;
    
    }
    .paint .head .heart3{
      width:250px;
     position: absolute;
      margin-top:-170px;
      margin-left:-70px;
      opacity: 0.1;
      display:none
    
    
    }
    
    .paint .head .heart4{
      width:250px;
     position: absolute;
      margin-top:-200px;
      margin-left:-70px;
      opacity: 0.2;
      display:none
    
    
    }
    
    
    .paint .head .arm1{
        background: #94c147;
        height: 62px;
        width: 20px;
        border-radius: 10px;
        margin-left: -23px;
        margin-top: -100px;
        transition: 0.5s;
        position: absolute;
    
    }
    .paint .head .arm2 {
        background: #94c147;
        height: 62px;
        width: 20px;
        border-radius: 10px;
        margin-left: 103px;
        margin-top: -100px;
      position: absolute;
    }
    
    .paint .head .leg1 {
        background: #94c147;
        height: 62px;
        width: 20px;
        border-radius: 10px;
        margin-left: 24px;
        margin-top: -45px;
        position: absolute;
    }
    
    .paint .head .leg2 {
        background: #94c147;
        height: 62px;
        width: 20px;
        border-radius: 10px;
        margin-left: 58px;
        margin-top: -45px;
      position: absolute;
    }
    
    .paint .head .logo{
        width: 200px;
        margin-top: -11px;
        margin-left: -37px;
      display:none
    }
    .paint .head .logo2{
        width: 200px;
        margin-top: 30px;
        margin-left: -37px;
      display:none;
    }
    button{cursor:pointer}
    
    JS
    $(document).ready(function(){
    $(".smile").click(function(){
      $(".mouce1").show(function(){
        $(".mouce2").hide();
        $(".arm1").animate({
            "marginTop":"-120px",
            });
          $(".arm2").animate({
            "marginTop":"-120px",
            });
        $(".heart").fadeIn();
          $(".leg1").animate({
            "marginLeft":"18px",
            });
          $(".leg2").animate({
            "marginLeft":"65px",
            });
          $(".logo").fadeIn();
        $(".head").css('background-color', '#94C147');
      $(".ear1").css('background-color', '#94C147');
      $(".ear2").css('background-color', '#94C147');
      $(".arm1").css('background-color', '#94C147');
      $(".arm2").css('background-color', '#94C147');
      $(".body").css('background-color', '#94C147');
      $(".leg1").css('background-color', '#94C147');
      $(".leg2").css('background-color', '#94C147');
        $(".heart3").fadeIn();
        $(".heart3").fadeOut(1000);
        $(".logo2").hide();
        
      });
    });
    
    
    $(".sad").click(function(){
      $(".mouce1").hide(function(){
        $(".mouce2").show();
        
      });
      $(".arm1").animate({
            "marginTop":"-100px",
            });
          $(".arm2").animate({
            "marginTop":"-100px",
            });
          $(".leg1").animate({
            "marginLeft":"24px",
            });
          $(".leg2").animate({
            "marginLeft":"58px",
            });
          $(".logo").fadeOut();
           
      $(".head").css('background-color', '#333');
      $(".ear1").css('background-color', '#333');
      $(".ear2").css('background-color', '#333');
      $(".arm1").css('background-color', '#333');
      $(".arm2").css('background-color', '#333');
      $(".body").css('background-color', '#333');
      $(".leg1").css('background-color', '#333');
      $(".leg2").css('background-color', '#333');
      $(".heart").fadeOut(function(){
         $(".heart2").fadeIn();
         $(".heart4").fadeIn();
        $(".heart4").fadeOut(1000);
            $(".logo2").fadeIn();
    
        
        
      });
          
    });
    
    
    
    });
    Term
    Sat, 01/13/2018 - 07:26

    Related Codes

    Pen ID
    Pen ID
    Pen ID
    Square Adv