以下是 CSS3鼠标悬停菜单切换效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tips & Tricks: How to spice up your menu with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tips & Tricks: How to spice up your menu with CSS3" />
<meta name="keywords" content="menu, hover, css3, effect, slide out, image, transition" />
<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/style.css" />
<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://www.bartoszkosowski.com/" target="_blank">Illustrations by Bartosz Kosowski</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" target="_blank">CC BY-NC 3.0</a>
<span class="right">
<a href="http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1><span>Tips & Tricks</span> How to spice up your menu with CSS3</h1>
<nav class="codrops-demos">
<a class="current" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<nav>
</header>
<ul class="mh-menu">
<li><a href="#"><span>Art Director</span> <span>Henry James</span></a><img src="images/1.jpg" alt="image01"/></li>
<li><a href="#"><span>Production Coordinator</span> <span>Francis Morgan</span></a><img src="images/2.jpg" alt="image02"/></li>
<li><a href="#"><span>Sound</span> <span>Kevin Schneider</span></a><img src="images/3.jpg" alt="image03"/></li>
<li><a href="#"><span>Casting</span> <span>Benjamin Zakalis</span></a><img src="images/4.jpg" alt="image04"/></li>
</ul>
</div>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tips & Tricks: How to spice up your menu with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tips & Tricks: How to spice up your menu with CSS3" />
<meta name="keywords" content="menu, hover, css3, effect, slide out, image, transition" />
<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=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://www.bartoszkosowski.com/" target="_blank">Illustrations by Bartosz Kosowski</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" target="_blank">CC BY-NC 3.0</a>
<span class="right">
<a href="http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1><span>Tips & Tricks</span> How to spice up your menu with CSS3</h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<nav>
</header>
<ul class="mh-menu">
<li><a href="#"><span>Art Director</span> <span>Henry James</span></a><img src="images/1.jpg" alt="image01"/></li>
<li><a href="#"><span>Production Coordinator</span> <span>Francis Morgan</span></a><img src="images/2.jpg" alt="image02"/></li>
<li><a href="#"><span>Sound</span> <span>Kevin Schneider</span></a><img src="images/3.jpg" alt="image03"/></li>
<li><a href="#"><span>Casting</span> <span>Benjamin Zakalis</span></a><img src="images/4.jpg" alt="image04"/></li>
</ul>
</div>
</body>
</html>
CSS代码(demo.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
section,header{display:block;}
/* General Demo Style */
body{font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#fff;font-weight:400;font-size:15px;color:#3a2127;overflow-y:scroll;}
a{color:#333;text-decoration:none;}
.container{width:100%;height:100%;position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px 30px 20px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{position:relative;color:#498ea5;font-weight:700;font-style:normal;font-size:30px;padding:0px 0px 5px 0px;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h1 span{font-family:'Alegreya SC',Georgia,serif;font-size:20px;line-height:20px;display:block;font-weight:400;font-style:italic;color:#719dab;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.container > header h2{font-size:16px;font-style:italic;color:#2d6277;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:rgba(0,0,0,0.05);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.codrops-top a:hover{background:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-demos{text-align:center;display:block;line-height:30px;padding:20px 0px;}
.codrops-demos a{display:inline-block;margin:0px 4px;padding:0px 4px;color:#fff;line-height:20px;font-style:italic;font-size:13px;border-radius:3px;background:rgba(41,77,95,0.1);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.codrops-demos a:hover{background:rgba(41,77,95,0.3);}
.codrops-demos a.current,.codrops-demos a.current:hover{background:rgba(41,77,95,0.3);}
CSS代码(style.css):
.mh-menu{height:385px;width:600px;margin:20px auto;position:relative;}
.mh-menu li{width:300px;}
.mh-menu li a{display:block;width:280px;padding:0px 10px;text-align:right;position:relative;z-index:10;height:97px;border-right:1px solid #ddd;background:rgba(255,255,255,0.8);}
.mh-menu li:hover a{background:rgba(225,239,240,0.4);}
.mh-menu li a span{display:block;}
.mh-menu li a span:first-child{font-weight:700;font-size:16px;color:#ddd;padding-top:10px;font-family:'Alegreya SC',Georgia,serif;}
.mh-menu li a span:nth-child(2){font-weight:400;font-style:italic;font-size:28px;font-family:'Alegreya SC',Georgia,serif;-webkit-transition:color 0.2s linear;-moz-transition:color 0.2s linear;-o-transition:color 0.2s linear;-ms-transition:color 0.2s linear;transition:color 0.2s linear;}
.mh-menu li:nth-child(1):hover span:nth-child(2){color:#ae3637;}
.mh-menu li:nth-child(2):hover span:nth-child(2){color:#c3d243;}
.mh-menu li:nth-child(3):hover span:nth-child(2){color:#d38439;}
.mh-menu li:nth-child(4):hover span:nth-child(2){color:#8e7463;}
.mh-menu li img{position:absolute;z-index:1;left:0px;top:0px;opacity:0;-webkit-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-moz-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-o-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-ms-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;}
.mh-menu li:hover img{left:300px;opacity:1;}
CSS代码(style2.css):
.mh-menu{height:385px;width:600px;margin:20px auto;position:relative;}
.mh-menu li{width:300px;}
.mh-menu li a{display:block;width:280px;padding:0px 10px;text-align:right;position:relative;z-index:10;background:#fff;height:97px;border-right:1px solid #ddd;background:rgba(255,255,255,0.8);}
.mh-menu li:hover a{background:rgba(255,255,255,1);}
.mh-menu li a span{display:block;}
.mh-menu li a span:first-child{font-weight:700;font-size:16px;color:#ddd;padding-top:10px;font-family:'Alegreya SC',Georgia,serif;}
.mh-menu li a span:nth-child(2){font-weight:400;font-style:italic;font-size:28px;font-family:'Alegreya SC',Georgia,serif;-webkit-transition:color 0.2s linear;-moz-transition:color 0.2s linear;-o-transition:color 0.2s linear;-ms-transition:color 0.2s linear;transition:color 0.2s linear;}
.mh-menu li:nth-child(1):hover span:nth-child(2){color:#ae3637;}
.mh-menu li:nth-child(2):hover span:nth-child(2){color:#c3d243;}
.mh-menu li:nth-child(3):hover span:nth-child(2){color:#d38439;}
.mh-menu li:nth-child(4):hover span:nth-child(2){color:#8e7463;}
.mh-menu li img{position:absolute;z-index:1;left:0px;top:0px;opacity:0;-webkit-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-moz-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-o-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-ms-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;}
.mh-menu li:hover img{left:300px;opacity:1;}
CSS代码(style3.css):
.mh-menu{height:385px;width:600px;margin:20px auto;position:relative;}
.mh-menu li{width:300px;}
.mh-menu li a{display:block;width:280px;padding:0px 10px;text-align:right;position:relative;z-index:10;background:#fff;height:97px;border-right:1px solid #ddd;background-color:rgba(255,255,255,0.8);}
.mh-menu li:nth-child(1):hover a{background-color:rgba(174,54,55,0.9);}
.mh-menu li:nth-child(2):hover a{background-color:rgba(195,210,67,0.9)}
.mh-menu li:nth-child(3):hover a{background-color:rgba(211,132,57,0.9);}
.mh-menu li:nth-child(4):hover a{background-color:rgba(142,116,99,0.9);}
.mh-menu li a span{display:block;}
.mh-menu li a span:first-child{font-weight:700;font-size:16px;color:#ddd;padding-top:10px;font-family:'Alegreya SC',Georgia,serif;}
.mh-menu li a span:nth-child(2){font-weight:400;font-style:italic;font-size:28px;font-family:'Alegreya SC',Georgia,serif;-webkit-transition:color 0.2s linear;-moz-transition:color 0.2s linear;-o-transition:color 0.2s linear;-ms-transition:color 0.2s linear;transition:color 0.2s linear;}
.mh-menu li:hover span:nth-child(2){color:#fff;}
.mh-menu li img{position:absolute;z-index:1;left:0px;top:0px;opacity:0;-webkit-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-moz-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-o-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;-ms-transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;transition:left 0.4s ease-in-out,opacity 0.6s ease-in-out;}
.mh-menu li:hover img{left:300px;opacity:1;}
分享到QQ
分享到微博
微信扫一扫
