.png)
Snowfall Effect using CSS for Blogger Blogs
So a while ago it was raining at my place so at the time I posted a way in which a blogger can add rain with audio to there blog;However, today I am back with an another simple tutorial with only two steps to show you how to add snow to your blog.
Now!
Step 1: Login to Blogger Dashboard, then choose Template -> Edit Html.
Step 2: Press Ctrl + F and search for the following keywords: </ body> very simple, just copy and paste the code below i </ body> .
<style>.snow-container{position:absolute;height:100vh;width:100%;max-width:100%;top:0;overflow:hidden;z-index:2;pointer-events:none}
.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:15s}
.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:20s;animation-duration:20s}
.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:25s}
.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 class='snow foreground layered'/><div class='snow middleground'/><div class='snow middleground layered'/><div class='snow background'/><div class='snow background layered'/></div>
.png)
0 comments: