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

  • snow fall effect using pure css

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.00k
    Comment on it

    Hi all, Below is an example of snow falling effect using pure css3. in this example I'm just using css animation and change the snow image position -

    css

    #snow{
    background: none;
    background-image: url('snow.png'),url('snow2.png'),url('snow2.png');
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:-1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

    For output you can see the background of the current page.

    html css css3 Animation snow-fall
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: