Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Aimated Text shadow by CSS 3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 310
    Comment on it

    Hello, Bellow is a animation showing shadow of a text moving relative to the movement of the light.

    <!doctype>
    <html>
    <head>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Anton);
    
    html {
      height: 100%;
    }
    
    body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #000 linear-gradient(#000 30%, #666);
      font: 150px/1 'Anton', sans-serif;
      letter-spacing: -0.02em;
      text-align: center;
    }
    
    .container {
      display: inline-block;
      position: relative;
      width: 940px;
      height: 100%;
    }
    
    .light {
      position: absolute;
      top: calc(50% - 160px);
      left: 50%;
      width: 0px;
      height: 0px;
      box-shadow: 0 0 140px 60px #fff;
      animation: light 16s ease-in-out infinite;
    }
    
    .text {
      position: absolute;
      width: 100%;
      top: calc(50% - 170px);
      color: #333;
      text-shadow: rgba(255, 255, 255, 0.3) 0 -1px;
    }
    
    .shadow-perspective {
      position: absolute;
      top: 50%;
      width: 100%;
      //perspective: 200px;
      transform-style: preserve-3d;
      animation: shadow-perspective 16s ease-in-out infinite;
    }
    
    .shadow-text {
      color: rgba(0, 0, 0, 0.5);
      transform: scaleX(1.58) scaleY(-1) scaleZ(2) rotateX(-45deg);
    }
    
    em {
      font-style: normal;
      font-size: 130%;
    }
    
    @keyframes light {
      0% {
        transform: translateX(-310px);
      }
      50% {
        transform: translateX(310px);
      }
      100% {
        transform: translateX(-310px);
      }
    }
    
    @keyframes shadow-perspective {
      0% {
        perspective-origin: 0% 0%;
        transform: translateX(176px);
      }
      50% {
        perspective-origin: 100% 0%;
        transform: translateX(-176px);
      }
      100% {
        perspective-origin: 0% 0%;
        transform: translateX(176px);
      }
    }
    </style>
    </head>
    <body>
    <div class="container">
      <div class="light"></div>
      <div class="text">F I N D N E R D</div>
      <div class="shadow-perspective">
        <div class="shadow-text">FINDNERD</div>
      </div>
    </div>
    </body>
    </html>
    

    Preview:- photo

 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: