almost 7 years ago
Hello Friends, The following codes below is an animation effect of css3 by implementing this code the fonts will comes in smoke style.
HTML
<h1><span>C</span><span>S</span><span>S</span><span> </span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span> </span><span>T</span><span>e</span><span>x</span><span>t</span><span> </span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span></h1>
CSS
@import url(http://fonts.googleapis.com/css?family=Finger+Paint); body { background: black; overflow: hidden; } h1 { font: 5vw/100vh "Finger Paint"; text-align: center; color: transparent; backface-visibility: hidden; } span { display: inline-block; text-shadow: 0 0 0 whitesmoke; -webkit-animation: smoky 5s both; animation: smoky 5s both; } span:nth-child(even){ animation-name: smoky-mirror; } @keyframes smoky { 60% { text-shadow: 0 0 40px whitesmoke; } to { transform: translate3d(15rem,-8rem,0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px whitesmoke; opacity: 0; } } @keyframes smoky-mirror { 60% { text-shadow: 0 0 40px whitesmoke; } to { transform: translate3d(18rem,-8rem,0) rotate(-40deg) skewX(-70deg) scale(2); text-shadow: 0 0 20px whitesmoke; opacity: 0; } } @for $item from 1 through 21 { span:nth-of-type(#{$item}){ animation-delay: #{($item/10)}s; }
}
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)