SnowFall Animation Using HTML and CSS

Hello Coders,

In this article we will be creating snowfall effect using CSS.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SnowFall | Codeithub</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="snowfalls" aria-hidden="true">
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❄
        </div>
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❄
        </div>
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❆
        </div>
        <div class="snowfall">
            ❄
        </div>
    </div>
    <div class="text">SnowFall | Codeithub</div>
</body>

</html>

CSS Code:

/*www.codeithub.com*/
body{
    background:#030333;
  }
  .snowfall {
    color: #ffffff;
  }
  @-webkit-keyframes snowfalls-fall{
      0%{
          top:-12%
        }
      100%{
          top:100%
        }
    }
  @-webkit-keyframes snowfalls-shake{
      0%{
        -webkit-transform:translateX(0px);
        transform:translateX(0px)
       }
      50%{
          -webkit-transform:translateX(70px);
          transform:translateX(70px)
        }
      100%{
            -webkit-transform:translateX(0px);
            transform:translateX(0px)
        }
     }
  @keyframes snowfalls-fall{
      0%{
          top:-10%
        }
      100%{
            top:100%
        }
    }
  @keyframes snowfalls-shake{
      0%{
          transform:translateX(0px)
        }
      50%{
          transform:translateX(70px)
        }
      100%{
            transform:translateX(0px)
        }
    }
.snowfall{
    position:fixed;
    top:-10%;
    z-index:9999;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowfalls-fall,snowfalls-shake;
    -webkit-animation-duration:7s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowfalls-fall,snowfalls-shake;
    animation-duration:7s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,runnin
}
.snowfall:nth-of-type(0){
    left:1%;
    -webkit-animation-delay:0s,0s;
    animation-delay:0s,0s}
.snowfall:nth-of-type(1){
    left:10%;
    -webkit-animation-delay:1s,1s;
    animation-delay:1s,1s}
.snowfall:nth-of-type(2){
    left:20%;
    -webkit-animation-delay:6s,.5s;
    animation-delay:6s,.5s}
.snowfall:nth-of-type(3){
    left:30%;
    -webkit-animation-delay:4s,2s;
    animation-delay:4s,2s}
.snowfall:nth-of-type(4){
    left:40%;
    -webkit-animation-delay:2s,2s;
    animation-delay:2s,2s}
.snowfall:nth-of-type(5){
    left:50%;
    -webkit-animation-delay:8s,3s;
    animation-delay:8s,3s}
.snowfall:nth-of-type(6){
    left:60%;
    -webkit-animation-delay:6s,2s;
    animation-delay:6s,2s}
.snowfall:nth-of-type(7){
    left:70%;
    -webkit-animation-delay:2.5s,1s;
    animation-delay:2.5s,1s}
.snowfall:nth-of-type(8){
    left:80%;
    -webkit-animation-delay:1s,0s;
    animation-delay:1s,0s}
.snowfall:nth-of-type(9){
    left:90%;
    -webkit-animation-delay:3s,1.5s;
    animation-delay:3s,1.5s}
.text{
    color:#f8efef;
    text-align: center;
    text-decoration: wavy;
    font-size: 50px;
}

OUTPUT

See also  Drop Caps Using CSS

Examples:

Pseudo Selector (Target Selector)

Bootstrap Dropdown Menu

Leave a Reply

Your email address will not be published. Required fields are marked *