Amazing Heart Beat and text Animation Using CSS3
by muthu[ Edit ] 2014-01-20 11:12:46
Amazing Heart Beat and text Animation Using CSS3
---------------------------------------------- DEMO ----------------------------------------------------
---------------------------------------------- CSS3 ----------------------------------------------------
body { background:#000; }
h2 { text-align:center; z-index:999999; position:relative; font-size:45px; font-family:arial sans-serif; color:#fff; padding-top:10px; }
@-webkit-keyframes glitter { 0% { -webkit-transform:scale(1.0); opacity:1; } 25% { -webkit-transform:scale(0.5); opacity:0; }
50% { -webkit-transform:scale(1.0); opacity:1; } 75% { -webkit-transform:scale(0.5); opacity:0; } 100% { -webkit-transform:scale(1.0); opacity:1; } }
@-moz-keyframes glitter { 0% { -moz-transform:scale(1.0); opacity:1; } 25% { -moz-transform:scale(0.5); opacity:0; } 50% { -moz-transform:scale(1.0); opacity:1; }
75% { -moz-transform:scale(0.5); opacity:0; } 100% { -moz-transform:scale(1.0); opacity:1; } }
.heart { float:left; width:50px; height:50px; animation:glitter 2s linear 0s infinite normal; -webkit-animation:glitter 2s linear 0s infinite normal;
-moz-animation:glitter 2s linear 0s infinite normal; -ms-animation:glitter 2s linear 0s infinite normal; -o-animation:glitter 2s linear 0s infinite normal; }
.heart:before, .heart:after { position:absolute; content:""; left:50px; top:0; width:47px; height:84px; background:#fc2e5a; -moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg);
transform:rotate(-45deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; }
.heart:after { left:0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
-webkit-transform-origin:105% 105%; -moz-transform-origin:105% 105%; -ms-transform-origin:105% 105%; -o-transform-origin:105% 105%; transform-origin :105% 105%; }
---------------------------------------------- HTML5 ---------------------------------------------------
<figure class="star">
<figure class="heart"><h2>M</h2></figure><figure class="heart"><h2>U</h2></figure>
<figure class="heart"><h2>T</h2></figure>
<figure class="heart"><h2>H</h2></figure><figure class="heart"><h2>U</h2></figure>
<figure class="heart"><h2>J</h2></figure><figure class="heart"><h2>O</h2></figure>
<figure class="heart"><h2>O</h2></figure>
</figure>
