3D TEXT ANIMATION CSS3

by muthu 2014-02-11 11:14:52

3D TEXT ANIMATION CSS3

----------------------------------------------DEMO---------------------------------------------------
3d_text.jpg
----------------------------------------------CSS3---------------------------------------------------
@-webkit-keyframes super-rainbow { 0% {color:#ff0000; } 20% { color:#f000ff; } 40% { color:#0000ff; } 60% { color:#00ffff; } 80% { color:#00ff00; } 100% { color:#ffff00; } }
@-moz-keyframes super-rainbow { 0% {color:#ff0000; } 20% { color:#f000ff; } 40% { color:#0000ff; } 60% { color:#00ffff; } 80% { color:#00ff00; } 100% { color:#ffff00; } }
h1 { -webkit-animation:super-rainbow 10s infinite alternate linear; -moz-animation:super-rainbow 10s infinite alternate linear; margin:0; padding:0; font:bold 100px Arial, Helvetica, sans-serif; color:#999; text-align:center; color:#09F; text-shadow:rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px; }
h2 { -webkit-animation:super-rainbow 10s infinite alternate linear; -moz-animation:super-rainbow 10s infinite alternate linear; margin:0; padding:0; font:bold 60px Arial, Helvetica, sans-serif; color:#999; text-align:center; color:#09F; text-shadow:rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px; }

---------------------------------------------HTML5---------------------------------------------------

<div id="body">
<h1>3D TEXT</h1>
<h2>MUTHUJOO</h2>
</div>
961
like
0
dislike
0
mail
flag

You must LOGIN to add comments