Bouncing Balls with CSS3 and HTML

Hi friends! Today we are going to see another great example of how to use the CSS3 and HTML in bouncing balls effects.

• The HTML
• The CSS

Use very basic html concept. For bouncing ball we use two important div are used like ‘wrapper’ and ‘ball_wrapper’. The ‘wrapper’ is the main DIV which wraps the ball. And we use four balls are used, the ball styles are specified in css. Ball styles are different from each other, the styles, height, positions are specified in css like ‘ball-one’, ‘bal-two’ etc.

    

        
Bouncing Balls with CSS3 and HTML
		

			

			

			

			

			

		
    
	

Define the style of ball and div area.First, we’ll want to set a basic width to our ‘wrapper’ DIV.

	.wrapper 
		{
			width: 80%; 
			box-shadow: 0 0 3px #000;
			margin: 0 auto; 
			padding: 10px;
		}
	
	
Second, Set the each ball style and position. Also set the background and specify browser also.
	
	
	#ball-one, #ball-two, #ball-three, #ball-four, #ball-five {
		-moz-border-radius:100px; // browser specify -Mozilla
		-ms-border-radius:100px; // crome 
		 -ms-animation: play 1.2s steps(10) infinite;
         -o-animation: play 1.2s steps(10) infinite;
		border-radius:100%;
	}	
	#ball-one{
		width:100px;
		height:100px;
		background-color:#0bdce9;
		margin:0 400px;
		margin-top:255px;
	}

	#ball-two{
		width:80px;
		height:80px;
		background-color:#0A6AFB;
		margin-top:-80px;
		margin-left: 50px;
	}
	 
	#ball-three{
		 width:90px;
		 height:90px;
		 background-color:#ff00f6;
		 margin-left:300px;
		 margin-top:-90px
	}

	#ball-four{
		 width:60px;
		 height:60px;
		 background-color:#00CC2C;
		 margin-left:180px;
		 margin-top:-90px
	}

	#ball-five{
		 width:120px;
		 height:120px;
		 background-color:#ffcc00;
		 margin-left:550px;
		 margin-top:-90px
	}