Post
Ask Question

Div Animation Using CSS3

Introduction

 
Today you will learn about animation divs using CSS3. You can rotate a div and content without Flash and jQuery. I will also describe the box-shadow and border-radius using CSS3.
 
Step 1
  1. <!doctype HTML>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <style>  
  6.         #main {  
  7.             height: 500px;  
  8.             width: 1024px;  
  9.             margin: 0 auto;  
  10.             border: 1px solid #333333;  
  11.             background: #CCCCCC;  
  12.         }   
  13.         #animation {  
  14.             height: 150px;  
  15.             width: 230px;             
  16.             margin: 70px 0 0 243px;  
  17.               }  
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <div id="main">  
  22.         <div id="animation">  
  23.    
  24.             <h2 >On Mouse Hover</h2>  
  25.         </div>  
  26.     </div>  
  27. </body>  
  28. </html> 
Cl1.jpg
 
Step 2
 
The CSS3 border-radius property allows web developers to easily utilize rounded corners in their design elements, without the need for corner images or the use of multiple div tags, and you can also write it like this:
  1. border-bottom-left-radius : 20px;      
  2. border-bottom-right-radius : 20px;        
  3. border-top-left-radius : 20px;           
  4. border-top-right-radius : 20px; 
  1. -webkit-border-radius: 20px;/*chrome  
  2. -moz-border-radius: 20px;/*mozila  
  3. -o-border-radius: 20px;/*opera  
  4. -ms-border-radius: 20px;/*I.E 9 
The code above produces the output below.
 
Cl2.jpg
 
Step 3
 
The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur, and spread. For example:
  1. -webkit-box-shadow: 5px 8px 10px #7b2236;/*chrome  
  2. -moz-box-shadow: 5px 8px 10px #7b2236;/*mozila  
  3. -o-box-shadow: 5px 8px 10px #7b2236;/*opera  
  4. -ms-box-shadow: 5px 8px 10px rgb(123,34,54;/*I.E 9 
The box-shadow property can accept a comma-separated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional "inset" keyword (to create an inner shadow, rather than the default outer shadow)
 
Output
 
Cl03.jpg
 
Step 4:  Final code
  1. <!doctype HTML>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <style>  
  6.         #main {  
  7.             height: 500px;  
  8.             width: 1024px;  
  9.             margin: 0 auto;  
  10.             border: 1px solid #333333;  
  11.             background: #CCCCCC;  
  12.         }   
  13.         #animation {  
  14.             height: 150px;  
  15.             width: 230px;  
  16.             border: 1px solid #330099;  
  17.             margin: 70px 0 0 243px;  
  18.             -webkit-border-radius: 20px;/*chrome  
  19.             -moz-border-radius: 20px;/*mozila  
  20.             -o-border-radius: 20px;/*opera  
  21.             -ms-border-radius: 20px;/*I.E 9  
  22.             -webkit-box-shadow: 5px 8px 10px #7b2236;/*chrome  
  23.             -moz-box-shadow: 5px 8px 10px #7b2236;/*mozila  
  24.             -o-box-shadow: 5px 8px 10px #7b2236;/*opera  
  25.             -ms-box-shadow: 5px 8px 10px rgb(123,34,54;/*I.E 9  
  26.             opacity: 0.3;  
  27.             background: #999999;  
  28.             -webkit-transition: -webkit-transform 2s,width 4s, opacity 3s;/*chrome  
  29.             -moz-transition: -moz-transform 2s,width 4s, opacity 3s;/*mozila  
  30.             -o-transition: -o-transform 2s,width 4s, opacity 3s;/*opera  
  31.             -ms-transition: -ms-transform 2s,width 4s, opacity 3s;/*I.E 9  
  32.         }   
  33.         h2 {  
  34.             opacity: 1;  
  35.             margin: 51px 0 0 23px;  
  36.             text-align: center;  
  37.         }  
  38.    
  39.         #animation:hover {  
  40.             width: 350px;  
  41.             height: 300px;  
  42.             -webkit-transform: rotate(360deg);/*chrome Yes  
  43.             -moz-transform: rotate(360deg);/*mozila No  
  44.             -o-transform: rotate(360deg);/*opera  
  45.             -ms-transform: rotate(360deg);/*I.E 9  
  46.              opacity: 1;  
  47.           
  48.         }  
  49.     </style>  
  50. </head>  
  51. <body>  
  52.     <div id="main">  
  53.         <div id="animation">  
  54.    
  55.             <h2 >On Mouse Hover</h2>  
  56.         </div>  
  57.     </div>  
  58. </body>  
  59. </html> 
When your mouse cursor moves out of the small div.
 
Output
 
Cli4.jpg
 
p.jpg
 
Then that div will be moved 360 degrees. Then you will find this type:
 
Clipboard01.jpg


Similar Articles