Create a snow effect with CSS3 for blogger

Create a snow effect with CSS3 for blogger. The coming Christmas season is also the time when bloggers race to decorate their blog/website as a habit. Snowfall is an indispensable effect! However, if you integrate this effect with a script when entering the page, the user will feel jerky, frozen, and very annoying.

With the powerful development of CSS3, it is possible to create this effect without using scripts. You will reduce the above lag.

To proceed with the integration, do the following.

Log in to your blog’s admin page and go to HTML editing.

Paste the following code before the closing </body> tag. 

<style type="text/css"> 

.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0 ;height:100%} 

.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform: translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} 

.snow.foreground{background-image:url( "https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s} 

.snow.foreground.layered{-webkit- animation-delay:7.5s;animation-delay:7.5s}

.snow.middleground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");-webkit-animation-duration:20:15s;animation-durations;animation-durations; } 

.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} 

.snow.background{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow -small-1ecd03b1fce08c24e064ff8c0a72c519.png");-webkit-animation-duration:25s;animation-duration:20s} 

.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} 

@- webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%, 100%,0);transform:translate3d(5%,100%,0)}}

@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100 %,0);transform:translate3d(5%,100%,0)}} 

</style> 

<div class='snow-container'> 

        <div class='snow foreground'></div> 

        <div class= 'snow foreground layered'></div> 

        <div class='snow middleground'></div> 

        <div class='snow middleground layered'></div> 

        <div class='snow background'></div> 

        <div class='snow background layered'></div> 

</div>

Save the sample and check the results.

Custom:

• Host 3 link photos to your account for safety. If using the default but the image link is broken, then I will send a new image link
• You can use the b:if tag to specify when the snow starts to fall. For example, don’t want it to fall on posts and static pages

<b:if cond='data:blog.pageType not in {"static_page","item"}'> 

// Insert snowfall code here 

</b:if>

With this simple trick, you can decorate your blog more splendidly to welcome Christmas and New Year. Good Luck!