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

浏览数：53 / 时间：2015年06月09日

之前分享了好多款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结束 */