New Year's banner on the site with CSS3

On the eve of the New Year holidays almost every site is decorated with the attributes of the main holiday of the year. Someone makes a garland, someone animated snow, someone puts a Christmas tree in the basement. Now I will try to explain how to make a beautiful, in my opinion, and animated banner on the site using CSS3.





The main structure of the banner will be contained in a fairly compact html.

')

<div class="header"> <h1>  !</h1> <div class="wrapper"> <div class="christmas-tree tree1"></div> <div class="christmas-tree tree2"></div> <div class="christmas-tree tree3"></div> <div class="snowman"></div> <div class="christmas-tree tree4"></div> <div class="christmas-tree tree5"></div> <div class="christmas-tree tree6"></div> </div> <div class="layer-snow"></div> </div> 

I think from the class names it is clear that on the page we will see a greeting, 6 Christmas trees and a snowman, and what they look like, we describe in css.

For the inscription "Happy holidays!" I connected the font from Google Fonts and registered the font-family for the H1 tag.

 <link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'> h1{ color: white; text-align: center; position: absolute; top: 10px; left: 0; right: 0; font-family: 'Marck Script', cursive; font-size: 3em; } 

The classes tree1, ..., tree6 differ only in their positioning, using the same image as the background in the christmas-tree file. Similarly, made our snowman. The necessary background, also lies in several files.

So, there is a background, there are Christmas trees, a snowman is in place. We lack only snowfall. For the basis of the animation of snowfall, I took the article mentioned earlier . The main animation frames are listed below.

  .header{ margin: 0 0 30px; position: relative; background-image: url(../img/snow3.png), url(../img/snow2.png); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; animation: snow 20s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px;} 100% {background-position: 400px 400px, 300px 300px;} } .layer-snow{ background-image: url(../img/snow.png); -webkit-animation: snow-layer 30s linear infinite; -moz-animation: snow-layer 30s linear infinite; animation: snow-layer 30s linear infinite; position: absolute; left: 0; right: 0; top: 0; height: 315px; } @keyframes snow-layer { 0% {background-position: 0px 0px;} 100% {background-position: 500px 1000px;} } 

For snow 2 animations, one of them is behind the main picture (snowdrifts, snowman, Christmas trees), the other before.

It remains to add a spectacular download of our banner, perhaps it will be easy and tasteful to “fall down” from the sky.

  .snowman { width: 78px; height: 105px; top: 195px; left: 445px; background: url(../img/snowman.png); -moz-animation-duration: .6s; -webkit-animation-duration: .6s; animation-duration: .6s; } @keyframes animate-drop { 0% {opacity:0;transform: translate(0, -315px);} 100% {opacity:1;transform: translate(0, 0);} } 

It seems to have forgotten nothing, you can view the demonstration, you can also download the source code there. In fact, I used this article as inspiration. Unfortunately, the banner does not work in IE and Opera, could not achieve anything from the latter, IE basically does not support keyframes (version 10 supports, but didn’t do it and didn’t test it), it also worked on android, though slowly ... 5 frames 7 per second, I think because of the overlay of several pictures with animation.