Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Smoke Font Animation

    • 0
    • 6
    • 4
    • 1
    • 0
    • 0
    • 0
    • 0
    • 2.03k
    Comment on it

    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>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</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; 
              }
    

    }

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: