Categories
CSS Web development

CSS Animation – Snowball

Usually, winter brings us beautiful snowflakes (we have already the middle of the winter season!) which in this season I can watch only in Snowball! You could see some Snowballs already on my blog, which I drew in Adobe Illustrator, but recently I thought…why not use CSS to create Snowball Animation? So, I made it up! Follow this tutorial and create your own CSS Animated Snowball.

Do you like this gif? Check more gifs in the store.
*animation opened in the Safari browser
To see the live output click here.

What do you need to do? You need to have pictures of the snow in .png format (you can download them below) and image of an object which you would like to put inside of snow globe (snowman, cityscape, etc.).

Optionally you gonna need an image of snowball holder (you can use mine too).

Images:

When you’ll get all the images you need:

  1. Add HMTL
  2. Add CSS
  3. Add CSS Animation

Let’s start!

Step 1.

Add HTML

Read the comments in the code:

<div id="ball-container">
        <img src="snowman.png"/> <! –– an image which you want to put inside of snow globe ––> 
        
        <div id="snow1" class="snow-layer"></div> 
        <div id="snow" class="snow-layer"></div>
        <div id="div-wrapper"class="div-wrapper">
        <img src="snowball.png"/></div><! –– an image of Snowball's holder (optional) ––>
        
        </div>

Step 2.

Add CSS

First, add a blue background. To see more HTML blue shadows click here.

body{
 background: #40E0D0;
        
}

Now, we’ll create a transparent ball and then we’ll put our image inside. We’ll use the border-radius property to make our bulb and image round. More about the border-radius property you can read here.

#ball-container {
          
position: relative;
background: transparent;
box-sizing: border-box;
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
box-shadow: inset 0px 15px 60px 5px rgba(0, 0, 0, 0.15);
z-index: 999;   
        }
        
#ball-container img {
width: auto;
height: auto;
position: absolute;
top: 90px;
right: 10%;
border-radius: 50%;
display: block;
        }
This is what you should see now on your screen.

Add the snow layer:

.snow-layer {
position: absolute;
box-sizing: border-box;
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;

Optional step: Add the Holder to the Ball.

.div-wrapper {
    position: relative;
    top: 8%;
    right: -22%;
}

Now, our Snowball should look like that:

Snowball with the holder.

Step 3.

Add CSS Animation

In #snow and #snow1 you need to add the images of snow in .png format.

 @keyframes backgroundScroll {
            0%   { background-position: 0 0 }
            100% { background-position: 0 500px }  
        }
  
        #snow1 {
            animation:  backgroundScroll 6s linear infinite;
            background: url('snow4.png') repeat;
            background-size: 100% 100%;   
        }
  
        #snow {
            animation: backgroundScroll 10s linear infinite;
            animation-delay: -3s; 
            background: url('snow3.png') repeat;
            background-size: 100% 100%;   
        }

Our Snowball is ready!

To see the live output visit: lenastanley.com

Enjoy coding!

Leave a Reply

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