<div class="wrapper">
<h1 class="logo">
<span class="heart"></span> Send Hearts
</h1>
<h4>Press and hold the heart below to Send Hearts</h4>
<div class="image-box">
<div class="box-wrapper">
<div class="heart-box">
<span class="heart four" data-heart="one"></span>
<span class="heart one" data-heart="two"></span>
<span class="heart three" data-heart="three"></span>
<span class="heart two" data-heart="two"></span>
<span class="heart five" data-heart="one"></span>
<span class="heart six" data-heart="two"></span>
<span class="heart eight" data-heart="two"></span>
<span class="heart seven" data-heart="three"></span>
<span class="heart ten" data-heart="one"></span>
<span class="heart nine" data-heart="one"></span>
</div>
<a class="button heart"></a>
</div>
</div>
</div>body{
background: #1E405B;
font-family: 'Open Sans', sans-serif;
}
h1{
font-weight: lighter;
font-size: 60px;
color: #fff;
margin-bottom:15px;
}
h4{
font-weight: lighter;
font-size: 24px;
color: rgba(255,255,255,0.5);
margin-top:0px;
margin-bottom:30px;
}
.wrapper{
max-width: 600px;
margin: auto;
text-align: center;
padding: 30px;
}
.logo{
.heart{
opacity: 1;
display: inline-block;
cursor: pointer;
width: 50px;
height: 40px;
padding-bottom: 10px;
left: auto;
position: relative;
vertical-align: middle;
}
}
.button{
&.heart{
opacity: 1;
display: block;
cursor: pointer;
position: relative;
width: 50px;
height: 40px;
left: auto;
padding-bottom: 10px;
margin: auto;
&:active{
&:before, &:after {
transition: 0.3s linear background;
background: #E73131;
}
}
}
}
.image-box{
background: url(https://s21.postimg.org/ibm7wbbvr/photo_1427348693976_99e4aca06bb9.jpg)no-repeat center;
background-size: cover;
border-radius: 5px 5px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2), -5px 0px 10px rgba(0,0,0,0.2);
height: 500px;
position: relative;
}
.box-wrapper{
width: 100px;
bottom: 20px;
right:0;
position: absolute;
}
.heart-box{
position: relative;
height: 200px;
width: 100px;
margin: auto;
bottom: -60px;
right: 0;
}
//Heart
.heart {
opacity: 0;
position: absolute;
left: 10%;
width: 50px;
height: 40px;
display: none;
transition: 1.5s ease-in-out opacity;
//Shape
&:before, &:after {
position: absolute;
content: "";
left: 25px;
top: 0;
width: 25px;
height: 40px;
background: #ff4040;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
&.one{
&:before, &:after{
background: orchid;
}
}
&.two{
&:before, &:after{
background: tomato;
}
}
&.three{
&:before, &:after{
background: limegreen;
}
}
&.four{
&:before, &:after{
background: gold;
}
}
&.five{
&:before, &:after{
background: skyblue;
}
}
&.six{
&:before, &:after{
background: orangered;
}
}
&.seven{
&:before, &:after{
background: coral;
}
}
&.eight{
&:before, &:after{
background: ForestGreen;
}
}
&.nine{
&:before, &:after{
background: magenta;
}
}
&.ten{
&:before, &:after{
background: deeppink;
}
}
}
//HeartUp
@keyframes heartUp {
0% {
bottom:0;
transform:scale(0);
opacity:0;
}
1% {
bottom:10%;
transform:scale(.9);
opacity:1;
}
20% {
opacity:1;
left: 5%;
}
40% {
opacity:1;
left: 15%;
}
60% {
opacity:1;
right: 5%;
}
100% {
bottom:110%;
transform:scale(.5);
opacity:0;
}
}
//Fly
.fly-one{
animation:heartUp 4s infinite ease-in-out;
}
.fly-two{
animation:heartUp 5s infinite ease-in-out;
}
.fly-three{
animation:heartUp 6s infinite ease-in-out;
}
//Active
.active{
display: block;
}var pos = 0;
var delay = 0.5;
jQuery('.heart-box').find('.heart').each(function(){
var _this = jQuery(this);
var heart = _this.data('heart');
setTimeout(function(){
_this.css('bottom', pos + "px");
_this.css('right', pos + "px");
_this.css('animation-delay', delay + "s");
pos = pos+10;
delay = delay+0.1;
_this.addClass('fly-' + heart);
}, 1000);
});
jQuery('.button').mousedown(function(){
jQuery('.heart').addClass('active');
});
jQuery('.button').mouseup(function(){
jQuery('.heart').removeClass('active');
});
External CSS
This Pen doesn't use any external CSS resources.