CSS snowflakes Fun for Christmas!

Community resources Webflow Tips
1

I found this snowflake HTML and CSS

CSSnowflakes

Add the css and HTML in an embed:

like this:

<style>
    .snowflake {
      color: #fff;
      font-size: 1em;
      font-family: Arial, sans-serif;
      text-shadow: 0 0 5px #000;
    }

    @-webkit-keyframes snowflakes-fall {
        0% {
            top: -10%;
        }

        100% {
            top: 100%;
        }
    }

    @-webkit-keyframes snowflakes-shake {
        0%{
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
        }

        50% {
            -webkit-transform: translateX(80px);
            transform: translateX(80px);
        }

        100% {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
        }
    }

    @keyframes snowflakes-fall {
      0% {
        top: -10%;
      }

      100% {
        top: 100%;
      }
    }

    @keyframes snowflakes-shake {
      0%{
        transform: translateX(0px);
      }

      50% {
        transform: translateX(80px);
      }

      100% {
        transform: translateX(0px);
      }
    }

    .snowflake {
        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: snowflakes-fall, snowflakes-shake;
        -webkit-animation-duration: 10s, 3s;
        -webkit-animation-timing-function: linear, ease-in-out;
        -webkit-animation-iteration-count: infinite, infinite;
        -webkit-animation-play-state: running, running;

        animation-name: snowflakes-fall, snowflakes-shake;
        animation-duration: 10s, 3s;
        animation-timing-function: linear, ease-in-out;
        animation-iteration-count: infinite, infinite;
        animation-play-state: running, running;
    }
    .snowflake:nth-of-type(0) {
        left: 1%;
        -webkit-animation-delay: 0s, 0s;
        animation-delay: 0s, 0s;
    }
    .snowflake:nth-of-type(1) {
        left: 10%;
        -webkit-animation-delay: 1s, 1s;
        animation-delay: 1s, 1s;
    }
    .snowflake:nth-of-type(2) {
        left: 20%;
        -webkit-animation-delay: 6s, 0.5s;
        animation-delay: 6s, 0.5s;
    }
    .snowflake:nth-of-type(3) {
        left: 30%;
        -webkit-animation-delay: 4s, 2s;
        animation-delay: 4s, 2s;
    }
    .snowflake:nth-of-type(4) {
        left: 40%;
        -webkit-animation-delay: 2s, 2s;
        animation-delay: 2s, 2s;
    }
    .snowflake:nth-of-type(5) {
        left: 50%;
        -webkit-animation-delay: 8s, 3s;
        animation-delay: 8s, 3s;
    }
    .snowflake:nth-of-type(6) {
        left: 60%;
        -webkit-animation-delay: 6s, 2s;
        animation-delay: 6s, 2s;
    }
    .snowflake:nth-of-type(7) {
        left: 70%;
        -webkit-animation-delay: 2.5s, 1s;
        animation-delay: 2.5s, 1s;
    }
    .snowflake:nth-of-type(8) {
        left: 80%;
        -webkit-animation-delay: 1s, 0s;
        animation-delay: 1s, 0s;
    }
    .snowflake:nth-of-type(9) {
        left: 90%;
        -webkit-animation-delay: 3s, 1.5s;
        animation-delay: 3s, 1.5s;
    }
    .snowflake:nth-of-type(10) {
        left: 25%;
        -webkit-animation-delay: 2s, 0s;
        animation-delay: 2s, 0s;
    }
    .snowflake:nth-of-type(11) {
        left: 65%;
        -webkit-animation-delay: 4s, 2.5s;
        animation-delay: 4s, 2.5s;
    }
    </style>

    <div class="snowflakes" aria-hidden="true">
      <div class="snowflake">
        ❅
      </div>
      <div class="snowflake">
        ❆
      </div>
      <div class="snowflake">
        ❅
      </div>
      <div class="snowflake">
        ❆
      </div>
      <div class="snowflake">
        ❅
      </div>
      <div class="snowflake">
        ❆
      </div>
      <div class="snowflake">
        ❅
      </div>
      <div class="snowflake">
        ❆
      </div>
      <div class="snowflake">
        ❅
      </div>
      <div class="snowflake">
        ❆
      </div>
      <div class="snowflake">
        ❅
      </div>
      <div class="snowflake">
        ❆
      </div>
    </div>

Little falling snowflakes :smiley:

image
image1566×843 11.9 KB

You can change the size of the snowflakes by editing the font-size

.snowflake {
      color: #fff;
      **font-size: 1em;**
      font-family: Arial, sans-serif;
      text-shadow: 0 0 5px #000;
    }

2em
image

3em
image

Change the speed of falling by editing:

.snowflake {
   -webkit-animation-duration: 3s, 3s; /*10s , 3s*/
  animation-duration: 3s, 3s; /*10s, 3s */
}
3 Likes
2

Thanks, @ElviraNL! :slight_smile:

1 Like
3

super cute! :snowman:

1 Like
4

This is so cool :smiley: Thank you

1 Like
5

Works like a charm, good on you for sharing it!

2 Likes