以下是 CSS3菜单模糊变换效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3模糊变换效果的菜单</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="Blur Menu with CSS3 Transitions" />
<meta name="keywords" content="css3, transitions, menu, blur, navigation, typography, font, letters, text-shadow" />
<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" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css' />
</head>
<body style="background-image: url(images/pattern.png), url(images/1.jpg);">
<div class="container">
<div class="header">
<a href="#">
Back
</a>
<div class="clr"></div>
</div>
<h1>CSS3菜单</h1>
<div class="content">
<ul class="bmenu">
<li><a href="#">About</a></li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Personal Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="more">
<ul>
<li>More examples:</li>
<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>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3模糊变换效果的菜单</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="Blur Menu with CSS3 Transitions" />
<meta name="keywords" content="css3, transitions, menu, blur, navigation, typography, font, letters, text-shadow" />
<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" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css' />
</head>
<body style="background-image: url(images/pattern.png), url(images/2.jpg);">
<div class="container">
<div class="header">
<a href="#">
Back
</a>
<div class="clr"></div>
</div>
<h1>CSS3菜单</h1>
<div class="content">
<ul class="bmenu">
<li><a href="#">About</a></li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Personal Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="more">
<ul>
<li>More examples:</li>
<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>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>
CSS代码(demo.css):
@import url('reset.css');/* General Demo Style */
body{background-color:transparent;background-repeat:repeat,no-repeat;background-position:center center;background-attachment:fixed;-webkit-background-size:auto,cover;-moz-background-size:auto,cover;-o-background-size:auto,cover;background-size:auto,cover;color:#fff;font-family:'Josefin Slab',Arial,sans-serif;font-size:13px;}
.container{position:relative;}
a{color:#fff;text-decoration:none;}
.clr{clear:both;}
.content{position:relative;width:580px;margin:0 auto;}
h1{margin:0px;padding:20px;font-size:42px;color:#fff;text-align:left;font-weight:400;text-align:left;}
h1 span{font-size:22px;color:#ddd;padding-top:10px;}
/* 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 ul{text-transform:uppercase;font-size:11px;padding:50px 0px 30px 20px;height:30px;clear:both;font-family:'Arial Narrow',Arial,sans-serif;width:830px;margin:0 auto;color:#fff;}
.more ul li{float:left;margin:0px 2px;}
.more ul li.selected a,.more ul li.selected a:hover{background:#000;color:#fff;text-shadow:none;}
.more ul li a{text-shadow:1px 1px 1px #fff;color:#555;background:#f7f7f7;padding:3px 6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.6);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.6);box-shadow:1px 1px 2px rgba(0,0,0,0.6);}
.more ul li a:hover{background:#000;color:#fff;text-shadow:none;}
CSS代码(style1.css):
.bmenu{padding:0px;margin:0 0 10px 0;position:relative;}
.bmenu li{font-size:50px;display:block;}
.bmenu li a{color:transparent;display:block;text-transform:uppercase;text-shadow:0px 0px 5px #fff;letter-spacing:1px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.bmenu:hover li a{text-shadow:0px 0px 5px #0d1a3a;}
.bmenu li a:hover{color:#fff;text-shadow:0px 0px 1px #fff;padding-left:10px;}
分享到QQ
分享到微博
微信扫一扫
