CSS3制作鼠标悬停动画菜单效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3制作鼠标悬停动画菜单效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3制作鼠标悬停动画菜单效果</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<br><br><br><br><br>
<div class="page">
	<section class="demo">
		<nav class="nav">
			<ul>
				<li>
					<a href="#">
						<span>
							Home
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>
							Phone
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>
							Wifi
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>
							Setting
						</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>
							Twitter
						</span>
					</a>
				</li>
			</ul>
		</nav>
	</section>
</div>
</body>
</html>

CSS代码(style.css):

@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结束 */

附件:下载该文件资源,减少时间成本(增值服务)