以下是 jQuery+CSS3绚丽动画菜单特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
部分效果截图3:
部分效果截图4:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creative CSS3 Animation Menus</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative CSS3 Animation Menus" />
<meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="header">
<a href="http://tympanus.net/Tutorials/BlurMenu/"><strong>« Previous Demo: </strong>Blur Menu</a>
<span class="right">
<a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
<a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/"><strong>Back to the Codrops Article</strong></a>
</span>
<div class="clr"></div>
</div>
<h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions & Animations</span></h1>
<div class="content">
<div class="more">
<ul>
<li class="selected"><a href="index.html">Example 1</a></li>
<li><a href="index2.html">Example 2</a></li>
<li><a href="index3.html">Example 3</a></li>
<li><a href="index4.html">Example 4</a></li>
<li><a href="index5.html">Example 5</a></li>
<li><a href="index6.html">Example 6</a></li>
<li><a href="index7.html">Example 7</a></li>
<li><a href="index8.html">Example 8</a></li>
<li><a href="index9.html">Example 9</a></li>
<li><a href="index10.html">Example 10</a></li>
</ul>
</div>
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized to your needs</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Creative Storytelling</h2>
<h3 class="ca-sub">Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">Infographical Education</h2>
<h3 class="ca-sub">Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Sophisticated Team</h2>
<h3 class="ca-sub">Professionals in action</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">d</span>
<div class="ca-content">
<h2 class="ca-main">Unconditional Support</h2>
<h3 class="ca-sub">24/7 for you needs</h3>
</div>
</a>
</li>
</ul>
</div><!-- content -->
</div>
<script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creative CSS3 Animation Menus</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative CSS3 Animation Menus" />
<meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />-->
</head>
<body>
<div class="container">
<div class="header">
<a href="http://tympanus.net/Tutorials/BlurMenu/"><strong>« Previous Demo: </strong>Blur Menu</a>
<span class="right">
<a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
<a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/"><strong>Back to the Codrops Article</strong></a>
</span>
<div class="clr"></div>
</div>
<h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions & Animations</span></h1>
<div class="content">
<div class="more">
<ul>
<li><a href="index.html">Example 1</a></li>
<li class="selected"><a href="index2.html">Example 2</a></li>
<li><a href="index3.html">Example 3</a></li>
<li><a href="index4.html">Example 4</a></li>
<li><a href="index5.html">Example 5</a></li>
<li><a href="index6.html">Example 6</a></li>
<li><a href="index7.html">Example 7</a></li>
<li><a href="index8.html">Example 8</a></li>
<li><a href="index9.html">Example 9</a></li>
<li><a href="index10.html">Example 10</a></li>
</ul>
</div>
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized to your needs</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Creative Storytelling</h2>
<h3 class="ca-sub">Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">N</span>
<div class="ca-content">
<h2 class="ca-main">Infographical Education</h2>
<h3 class="ca-sub">Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Sophisticated Team</h2>
<h3 class="ca-sub">Professionals in action</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Unconditional Support</h2>
<h3 class="ca-sub">24/7 for you needs</h3>
</div>
</a>
</li>
</ul>
</div><!-- content -->
</div>
<script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>
CSS代码(demo.css):
@import url('reset.css');/* General Demo Style */
body{background:#e6eecc url(../images/beige_paper.png) repeat top left;color:#333;font-family:'Terminal Dosis',Arial,sans-serif;font-size:13px;}
.container{position:relative;}
a{color:#fff;text-decoration:none;}
.clr{clear:both;}
.content{position:relative;}
h1{margin:0px;padding:20px;font-size:32px;color:#000;text-shadow:1px 1px 1px rgba(255,255,255,0.9);text-align:center;font-weight:400;}
h1 span{display:block;font-size:14px;color:#666;font-style:italic;font-family:Georgia,serif;padding-top:5px;}
/* Header Style */
.header{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.header a:hover{color:#fff;}
.header span.right{float:right;}
.header span.right a{float:none;display:inline;}
.more{position:relative;clear:both;font-size:11px;padding:20px 0px;text-transform:uppercase;width:390px;height:55px;margin:0 auto;}
.more ul{display:block;text-align:center;}
.more ul li{display:block;padding:4px 2px;float:left;}
.more ul li.selected a,.more ul li.selected a:hover{background:#0099c5;color:#fff;text-shadow:none;font-weight:bold;}
.more ul li a{color:#555;float:left;background:#fff;width:64px;padding:2px 5px;-moz-box-shadow:1px 1px 2px #aaa;-webkit-box-shadow:1px 1px 2px #aaa;box-shadow:1px 1px 2px #aaa;}
.more ul li a:hover{background:#000;color:#fff;}
CSS代码(style1.css):
@font-face{font-family:'WebSymbolsRegular';src:url('websymbols/websymbols-regular-webfont.eot');src:url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),url('websymbols/websymbols-regular-webfont.woff') format('woff'),url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');font-weight:normal;font-style:normal;}
.ca-menu{padding:0;margin:20px auto;width:500px;}
.ca-menu li{width:500px;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;}
.ca-menu li:last-child{margin-bottom:0px;}
.ca-menu li a{text-align:left;display:block;width:100%;height:100%;color:#333;position:relative;}
.ca-icon{font-family:'WebSymbolsRegular',cursive;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;}
.ca-content{position:absolute;left:120px;width:370px;height:60px;top:20px;}
.ca-main{font-size:30px;-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;color:#666;-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-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;}
分享到QQ
分享到微博
微信扫一扫
