I wanted an inline heart that was beating so I’ve put together a simple script that does this for you.

The following will style the heart for you, and prevent content around it moving.

.heartbeat {
position:relative;
font-size:20px;
color: red;
width: 34px;
height: 30px;
text-align: center;
align: center;
display: inline-block;
}

This part is the jQuery that creates the animation loop

(function pulse(back) {
    $('.heartbeat').animate(
        {
            'font-size': (back) ? '20px' : '25px',
            opacity: (back) ? 1 : 0.5
        }, 700, function(){pulse(!back)});
})(false);

And the final is the inline heart that you can place in your text:

Technology We <span class="heartbeat"></span> to Use

And walla! A beating html heart!

Leave a Reply

Your email address will not be published. Required fields are marked *