基于CSS3制作的鼠标悬停动画菜单

之前分享了好多款css3实现的鼠标悬停效果。今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单。这款菜单适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div class="page">

        <section class="demo">

            <nav class="nav">

                <ul>

                    <li><a href="http://www.w2bc.com/"><span>Home </span></a></li>

                    <li><a href="http://www.w2bc.com/"><span>Phone </span></a></li>

                    <li><a href="http://www.w2bc.com/"><span>Wifi </span></a></li>

                    <li><a href="http://www.w2bc.com/"><span>Setting </span></a></li>

                    <li><a href="http://www.w2bc.com/"><span>Twitter </span></a></li>

                </ul>

            </nav>

        </section>

    </div>

css3代码：

@charset "utf-8";

/*科e互联特效基本框架CSS*/

body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}

h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}

div {text-align:left}

a img {border:0}

body { color: #333; text-align: center; font: 12px "微软雅黑"; }

ul, ol, li {list-style-type:none;vertical-align:0}

a {outline-style:none;color:#535353;text-decoration:none}

a:hover { color: #D40000; text-decoration: none}

.clear{height:0; overflow:hidden; clear:both}

/* 效果CSS开始 */

body {

 -webkit-backface-visibility: hidden;

}    

.demo {

 margin: 0px auto;

 text-align:center;

} 

.nav li    {

 position: relative;

 display: inline-block;

 margin-left: -50px;

 -webkit-transition: all 0.4s linear;

 -moz-transition: all 0.4s linear;

 -o-transition: all 0.4s linear;

 -ms-transition: all 0.4s linear;

 transition: all 0.4s linear;

}

.nav li a {

 display: inline-block;

 width: 120px;

 height: 120px;

 padding: 30px;

 border-radius: 50%;

 border-width: 8px;

 border-style: solid;

}

.nav li:hover {

 z-index: 11;

 -webkit-transform: scale(1.1);

 -moz-transform: scale(1.1);

 -o-transform: scale(1.1);

 -ms-transform: scale(1.1);

 transform: scale(1.1);

}

.nav li:hover a {

 text-decoration: none;

}

.nav li:hover span {

 -webkit-transition: all 0.4s linear;

 -moz-transition: all 0.4s linear;

 -o-transition: all 0.4s linear;

 -ms-transition: all 0.4s linear;

 transition: all 0.4s linear;

 -webkit-animation: moveFromBottom 0.3s ease;

 -moz-animation: moveFromBottom 0.3s ease;

 -o-animation: moveFromBottom 0.3s ease;

 -ms-animation: moveFromBottom 0.3s ease;

 animation: moveFromBottom 0.3s ease;

}

.nav li:nth-child(1) a {

 color: #4d9683;

 text-shadow: 0 1px 0 #9de3cf;

 border-color: #549e89;

 background-color: #51c9a7;

}

.nav li:nth-child(2) a {

 color: #be607e;

 text-shadow: 0 1px 0 #de8ba5;

 border-color: #e499b0;

 background-color: #e67b9c;

}

.nav li:nth-child(3) a {

 color: #5e9eb4;

 text-shadow: 0 1px 0 #adddec;

 border-color: #a2cfde;

 background-color: #7ec9e3;

}

.nav li:nth-child(4) a {

 color: #ba9d5e;

 text-shadow: 0 1px 0 #f5e0ad;

 border-color: #dcc999;

 background-color: #f0cd78;

}

.nav li:nth-child(5) a {

 color: #b468a2;

 text-shadow: 0 1px 0 #e8acd8;

 border-color: #d8abcd;

 background-color: #dd91cb;

}

.nav li:nth-child(1):hover a {

 color: #0f775c;

 text-shadow: 0 1px 0 #81e6c9;

 border-color: #0a8462;

 background-color: #00c18c;

}

.nav li:nth-child(2):hover a {

 color: #b12a55;

 text-shadow: 0 1px 0 #ff95b7;

 border-color: #ba335c;

 background-color: #ea5180;

}

.nav li:nth-child(3):hover a {

 color: #2883a2;

 text-shadow: 0 1px 0 #9cdef2;

 border-color: #4397b3;

 background-color: #55c1e5;

}

.nav li:nth-child(4):hover a {

 color: #ab8228;

 text-shadow: 0 1px 0 #ffe199;

 border-color: #b08f3e;

 background-color: #f8c64d;

}

.nav li:nth-child(5):hover a {

 color: #a33689;

 text-shadow: 0 1px 0 #ec97d6;

 border-color: #b7569f;

 background-color: #dd70c3;

}

.nav span {

 display: block;

 line-height:70px;

 font-size: 30px;

 font-style: normal;

}

.nav span:before {

 display: block;

}

.nav li:nth-child(1) span:before {

 content: "home";

}

.nav li:nth-child(2) span:before {

 content: "phone";

}

.nav li:nth-child(3) span:before {

 content: "wifi";

}

.nav li:nth-child(4) span:before {

 content: "setting";

}

.nav li:nth-child(5) span:before {

 content: "twitter";

}

@-webkit-keyframes moveFromBottom {

  from {

    -webkit-transform: translateY(120%) scale(0.5) ;

    opacity: 0;

  }

 to {

   -webkit-transform: translateY(0%) scale(1);

   opacity: 1;        

 }

}

@-moz-keyframes moveFromBottom {

  from {

    -moz-transform: translateY(120%) scale(0.5) ;

    opacity: 0;

  }

  to {

    -moz-transform: translateY(0%) scale(1);

    opacity: 1;        

  }

}

@-ms-keyframes moveFromBottom {

  from {

    -ms-transform: translateY(120%) scale(0.5) ;

    opacity: 0;

  }

  to {

   -ms-transform: translateY(0%) scale(1);

   opacity: 1;        

 }

}

@-o-keyframes moveFromBottom {

  from {

    -o-transform: translateY(120%) scale(0.5) ;

    opacity: 0;

  }

  to {

   -o-transform: translateY(0%) scale(1);

   opacity: 1;        

 }

}

@keyframes moveFromBottom {

  from {

    transform: translateY(120%) scale(0.5) ;

    opacity: 0;

  }

  to {

   transform: translateY(0%) scale(1);

   opacity: 1;        

 }

}

.nav span:before { 

 font-family: 'LigatureSymbols';

 text-rendering: optimizeLegibility;

 -webkit-font-smoothing: antialiased;

 -moz-font-smoothing: antialiased;

 -ms-font-smoothing: antialiased;

 -o-font-smoothing: antialiased;

 font-smoothing: antialiased;

 -webkit-font-feature-settings: "liga" 1, "dlig" 1;

 -moz-font-feature-settings: "liga=1, dlig=1";

 -ms-font-feature-settings: "liga" 1, "dlig" 1;

 font-feature-settings: "liga" 1, "dlig" 1;

 font-size: 80px;

}

@font-face {

 font-family: 'LigatureSymbols';

 src: url('../font/LigatureSymbols-2.05.eot');

 src: url('../font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),

   url('../font/LigatureSymbols-2.05.woff') format('woff'),

   url('../font/LigatureSymbols-2.05.ttf') format('truetype'),

   url('../font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');

 font-weight: normal;

 font-style: normal;

}

/* 效果CSS结束 */

via：http://www.w2bc.com/Article/19450