You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.
Below is the css style code required to create the heart shape with beating animation in CSS3.
.heart-shape { position: relative; width: 50px; -webkit-animation: heart-beats 3s infinite; animation: heart-beats 3s infinite; } .heart-shape:before, .heart-shape:after { background: #fd3803; position: absolute; width: 22px; height: 35px; top: 0; left: 22px; content: ''; border-radius: 50px 50px 0 0; transform: rotate(-45deg) translateZ(0); -webkit-transform: rotate(-45deg) translateZ(0); transform-origin: 0 100%; -webkit-transform-origin: 0 100%; } .heart-shape:after { left: 0; transform: rotate(45deg) translateZ(0); -webkit-transform: rotate(45deg) translateZ(0); transform-origin :100% 100%; -webkit-transform-origin: 100% 100%; } @keyframes heart-beats { 0% { transform: scale(1); background-color:black;} 7% { transform: scale(1.2); } 12% { transform: scale(1.1); } 20% { transform: scale(1.3); } 60% { transform: scale(1); } 100% { transform: scale(0.99); } } @-webkit-keyframes heart-beats { 0% { -webkit-transform: scale(1); } 7% { -webkit-transform: scale(1.2); } 12% { -webkit-transform: scale(1.1); } 20% { -webkit-transform: scale(1.3); } 60% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0.99); } }
Here is the html code required to create the heart shape. Basically just a div tag with a heart-beat css class on it.
<div class="heart-shape"></div>