"
Animasi Text Fill" ini saya dapat dari
codepen.io ketika saya sedang berselancar di dunia internet dan animasi ini dibuat oleh "
Daniel Riemer", Animasi pada text tersebut lumayan keren dan mungkin dapat membuat anda tertarik untuk menggunakan-nya :D
Berikut demo "Animasi Text Fill". Gunakan "Google Chrome" untuk tampilan yang maksimal.
Berikut Cara Membuat "Animasi Text Fill Dengan Css3".Kode Css3.Tempatkan kode dibawah ini diatas kode
]]></b:skin>..textfill {
text-transform: uppercase;
letter-spacing: .5em;
border: 4px double rgba(255,255,255,.25);
border-width: 4px 0;
padding: 1.5em 0em;
width: 100%;
margin: 0;
}
.textfill span {
font: 700 4em/1 "Oswald", sans-serif;
letter-spacing: 0;
padding: .25em 0 .325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba(255,255,255,.5);
background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 120s linear infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
Kode HTML.Anda bisa menempatkan kode ini dimana saja yang anda inginkan.
<div class="textfill"><span>Maz Waone</span></div>
