LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Click the heart to break it. :(
CSS
html, body{margin:0; padding:0; min-height:100%;}

body{background:#ddd; padding:10%; font-family:arial}

*{
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

.heart-Circle{
  border:7px solid #fc2e5a;
  border-radius:260px;
  height:140px;
  overflow:hidden;
  position:relative;
  width:140px;
}

.heart-Container{
  left:11%;
  position:absolute;
  top:20%;
  -moz-transition:all 0.35s; 
  -webkit-transition:all 0.35s;  
  transition:all 0.35s;
}

.heart-Container.broken{
  left:6%;
  top:23%;
}

.heart{
    height:90px;
    position:relative;
    width:50px; 
}

.heart:before, .heart:after{
    background:#fc2e5a;
    border-radius:50px 50px 0 0;
    content:"";
    height:80px;
    left:50px;
    position:absolute;
    top:4px;
    width:50px;

    -webkit-transform:rotate(-45deg);
       -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
    -webkit-transform-origin:0 100%;
       -moz-transform-origin:0 100%;
        -ms-transform-origin:0 100%;
            transform-origin:0 100%;
}

.heart:after {
    left:0;

    -webkit-transform:rotate(45deg);
       -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
            transform:rotate(45deg);

    -webkit-transform-origin:100% 100%;
       -moz-transform-origin:100% 100%;
        -ms-transform-origin:100% 100%;
            transform-origin:100% 100%;
}

/* Split the heart in two */
.sides{
  float:left;
  position:relative;
  -moz-transition:all 0.35s; 
  -webkit-transition:all 0.35s;  
  transition:all 0.35s;
}

.half{
  overflow:hidden;
  position:relative;
  width:50px;
}

.right-Side .heart:after,
.right-Side .heart:before{
  left:-50px;
}

/* create the rip in the center */
.points{
  position:absolute;
  top:20px
}

.left-Side .points{left:100%}
.right-Side .points{right:100%}

.point{
  border-bottom: 8px solid transparent;
  border-left:   16px solid #fc2e5a;
  border-top:    8px solid transparent;
  height:0;
  width:0;
   
}

.right-Side .point {
  border-bottom:  8px solid transparent;
  border-left:    none;
  border-right:   16px solid #fc2e5a;
  border-top:     8px solid transparent;
  position:relative;
}

.left-Side .point{
  left:-3px;
  position:relative;
  top:3px;
  -moz-transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  transform:rotate(-2deg);
}

.left-Side .pt1{
  left:-5px;
  top:-4px;
  -moz-transform:rotate(29deg);
  -webkit-transform:rotate(29deg);
  transform:rotate(29deg);
}

.left-Side .pt2{
  top:1px;
}

.left-Side .pt3{
  left:-5px;
  top:4px;
  -moz-transform:rotate(-29deg);
  -webkit-transform:rotate(29deg);
  transform:rotate(29deg);
}

.left-Side .pt4{
  left:-7px;
  position:absolute;
  top:5px;
  -moz-transform:rotate(-9deg);
  -webkit-transform:rotate(-9deg);
  transform:rotate(-9deg);
}

.right-Side .point{
  right:-3px;
  top:-5px;
  -moz-transform:rotate(-15deg);
  -webkit-transform:rotate(-15deg);
  transform:rotate(-15deg);
}

.right-Side .pt2{
  top:-7px;
}

.right-Side .pt3{
  right:-5px;
  top:-6px;
  -moz-transform:rotate(-26deg);
  -webkit-transform:rotate(-26deg);
  transform:rotate(-26deg);
}

.broken .left-Side{
  margin-right:6px;
  -moz-transform:rotate(-10deg);
  -webkit-transform:rotate(-10deg);
  transform:rotate(-10deg);
}

.broken .right-Side{
  margin-left:6px;
  -moz-transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
  transform:rotate(10deg);
}







JS
$(document).ready(function(){ 
        $('.heart-Circle').click(function(){
          $('.heart-Container').toggleClass('broken');
        });
      });
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv