10 Kinds of Creative animated menu effects created by CSS3

CSS3 new features to achieve animation, you can have a preliminary understanding of these new features through this article. This article will bring you some creative menu hover effect. It consists of simple elements, such as icons, main headings, subheadings, and CSS3 the latest transitions (transition) and animations (animation) two functions to animate the mouse hover.

Demo Downloads

The icon used in the example is actually a network symbol font, contained in @font-face. This font is developed by the just is nice studio.

Mark

The HTML schema for a menu is an unordered list, where each option is a LINK element consisting of an icon span and a content layer. The content layer contains the main title and subtitle:

   
   
    
    <ul class= "Ca-menu" >      <li>   & nbsp;      <a href= "#" >        & nbsp;     <span class= "Ca-icon" >A</span>     & nbsp;        <div class= "Ca-content" >    & Nbsp;              
Because we use symbolic fonts as icons, we write letters for icons.

CSS

The common styles in all the examples contain symbol fonts:

 @font-face {      font-family:  ' websymbolsregular '; &n
    
    Bsp     src: url (' Websymbols/websymbols-regular-webfont.eot ');       src: url (' Websymbols/websymbols-regular-webfont.eot #iefix ')  format (' Embedded-opentype '),            url (' Websymbols/websymbols-reg Ular-webfont.woff ')  format (' Woff '),            url (' Websy Mbols/websymbols-regular-webfont.ttf ')  format (' TrueType '),           ;   url (' Websymbols/websymbols-regular-webfont.svg#websymbolsregular ')  format (' svg ');       font-weight: normal;       font-style: normal;  }  
 
The path to the file is relative to the CSS file, so they should be placed in the Websymbols (css/websymbols/) in the CSS directory.

The advantage of using icons as a font is that you can use beautiful effects for them, such as text shadow. You can also zoom in or out proportionally to your needs.

The unordered list styles in each example are the same. We just make it fit and easy to live in the middle of the screen:

   
   
    
    . ca-menu{
    
    padding:0;  
    
    margin:20px Auto;  
    
    width:500px;
    
    }
   
   
 
In the following example, you will be shown how the style of the element is serviced for the final effect.

In the 1th example, we'll look at the style of the elements, and in other examples, we'll focus on rewriting the code.

Note: In the following example, I will not write any browser-specific prefixes, but you will see all the necessary prefixes in the sample folder.




CSS3 10 Creative animated Menu Effects-1


In the stacked menu for example 1, you can implement the size of each element and the change in the background color of individual menu items.

To define a style for a list item:

   
   
    
    . ca-menu li{      width: 500px;   &NBSP;&NBSP ;  height: 100px;       overflow: hidden;       display: block;       background:  #fff;       -webkit-box-shadow: 1px 1px 2px rgba (0,0,0,0.2);       -moz-box-shadow: 1px 1px 2px rgba (0,0,0,0.2);       box-shadow: 1px 1px 2px rgba (0,0,0,0.2);       margin-bottom: 4px;       border-left: 10px solid  #000;       -webkit-transition: all 300ms ease-in-out;       -moz-transition: all 300ms ease-in-out;       -o-transition: all 300ms ease-in-out;       -ms-transition: all 300ms ease-in-out;       transition: all 300ms ease-in-out;
   
     } 
 
The transition effect is appropriate for all properties because the border and background color changes when the mouse is moved.

LINK element style see below:

   
   
    
    . ca-menu Li a{
    
    text-align:left;  
    
    Display:block;  
    
    width:100%;  
    
    height:100%;  
    
    color: #333;  
    
    position:relative;
    
    }
   
   
 
Defines a style for a single element.

The icon is on the left and its span style is shown below:

   
   
    
    . ca-icon{      font-family:  ' websymbolsregular ', cursive; &
    
    nbsp     font-size: 20px;       text-shadow: 0px 0px 1px  #333;       line-height: 90px;       position: absolute;       width: 90px;       left: 20px;       text-align: center;       -webkit-transition: all 300ms linear;       -moz-transition: all 300ms linear;       -o-transition: all 300ms linear;       -ms-transition: all 300ms linear;       transition: all 300ms linear;
   
     } 
 
As you can see, we use the network symbol to do the font. Each letter is an icon.

The encapsulation of the content element is shown in the following style:

   
   
    
    . ca-content{
    
    Position:absolute;  
    
    left:120px;  
    
    width:370px;  
    
    height:60px;  
    
    top:20px;
    
    }
   
   
 
Modify the font value of the content element in your code to achieve a uniform transition effect for transition add linear property:

   
   
    
    . ca-main{      font-size: 30px;   &NBSP;&NBSP;&NBS p; -webkit-transition: all 300ms linear;       -moz-transition: all 300ms linear;       -o-transition: all 300ms linear;       -ms-transition: all 300ms linear;       transition: all 300ms linear;  }   ca-sub{      font-size: 14px;   & nbsp;   color:  #666;       -webkit-transition: all 300ms linear;       -moz-transition: all 300ms linear;       -o-transition: all 300ms linear;   &NBSP;&NBSP;&NBsp; -ms-transition: all 300ms linear;
   
          transition: all 300ms linear;   } 
 
Now, for the most interesting part, when the mouse hovers over the list element, we see changes in font size and color:

   
   
    
    . Ca-menu li:hover{
    
    border-color: #fff004;  
    
    background: #000;
    
    }  
    
    .  Ca-menu li:hover. ca-icon{
    
    color: #fff004;  
    
    text-shadow:0px 0px 1px #fff004;  
    
    font-size:50px;
    
    }  
    
    .  Ca-menu li:hover. ca-main{
    
    color: #fff004;  
    
    font-size:14px;
    
    }  
    
    .  Ca-menu li:hover. ca-sub{
    
    color: #fff;  
    
    font-size:30px;
    
    }
   
   
 
Because we define a transition effect for each element, we see the animation effect when we switch.

CSS3 10 Creative animated Menu Effects-2


In Example 2, we give the content elements an animation effect from the top and bottom two directions, respectively.

   
   
    
    . ca-menu li:hover{      background:  #e1f0fa;   }   ca-menu li:hover .ca-icon{      font-size: 40px; &N
    
    Bsp     color:  #259add;       opacity: 0.8;       text-shadow: 0px 0px 13px  #fff;  }   ca-menu li:hover .ca-main{  &NBSP;&NBSP;&NBSP;&NBSP;OPACITY:&N bsp;1;       color: #2676ac;       -webkit-animation: moveFromTop 300ms ease-in-out;       -moz-animation: moveFromTop 300ms ease-in-out;       -ms-animation: moveFromTop 300ms ease-in-out;  }   Ca-menu li:hover .ca-sub{      opacity: 1;       -webkit- animation: movefrombottom 300ms ease-in-out;       -moz-animation: moveFromBottom 300ms ease-in-out;       -ms-animation: moveFromBottom 300ms ease-in-out;
   
     } 
 
First, you define two animation effects. The first is to move each element down the y-axis 200% (that is, the value of Translatey is 200%). In addition, its opacity is set to 0 (that is, the value of opacity is set to 0). When the mouse is moved, the original effect is returned, and the Translatey value is set to 0% after "to" as shown in the following code.

   
   
    
    @-webkit-keyframes Movefrombottom {from
    
    {
    
    opacity:0;  
    
    -webkit-transform:translatey (200%);    
    
    }  
    
    to {
    
    opacity:1;  
    
    -webkit-transform:translatey (0%);
    
    }  
    
    }
   
   
 
The second animation effect implementation elements from up to down, follow the same rules, only the corresponding number to be modified:

   
   
    
    @-webkit-keyframes Movefromtop {from
    
    {
    
    opacity:0;  
    
    -webkit-transform:translatey (-200%);    
    
    }  
    
    to {
    
    opacity:1;  
    
    -webkit-transform:translatey (0%);
    
    }  
    
    } 

   
   
 

CSS3 10 Creative animated Menu Effects-3


In Example 3, when the mouse hovers, the background and text colors are changed, accompanied by an icon rotation and magnification. The effect can be achieved by changing the transform property and the value of the font size of the icon being modified:

   
   
    
    . ca-menu li:hover{      background-color:  #000;   }   ca-menu li:hover .ca-icon{      color:  #f900b0;       font-size: 120px;       opacity: 0.2;       left: -20px;       -webkit-transform: rotate (20DEG);       -moz-transform: rotate (20DEG);       -ms-transform: rotate (20DEG);       transform: rotate (20DEG);  }   ca-menu li:hover .ca-main{      color:&nbs p; #f900b0;       opacity: 0.8;
    
 }   ca-menu li:hover .ca-sub{         color:  #fff;       opacity: 0.8;
   
     } 
 
CSS3 10 Creative animated Menu Effects-4


Example 4 to Example 8 uses a menu of different layouts. The menu items are arranged adjacent to each other, floating in shape.

   
   
    
    . ca-menu li{
    
    width:200px;  
    
    height:300px;  
    
    Overflow:hidden;  
    
    position:relative;  
    
    Float:left;  
    
    border:5px solid #fff;  
    
    background: #e2f0ff;
    
    -WEBKIT-BOX-SHADOW:&NB