html5+CSS3 飘带菜单超酷3D菜单

古城微笑少年丶 2022-08-13 14:45 216阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset='utf-8'/>
    		<title>CSS Ribbon</title>
    		<style>
    			* { 
    				/* Basic CSS reset */
    				margin:0; 
    				padding:0;
    			}
    
    			body {
    				/* These styles have nothing to do with the ribbon */
    				background:url(dark_wood.png) 0 0 repeat;
    				padding:35px 0 0;
    				margin:auto;
    				text-align:center;
    			}
    
    			.ribbon {
    				display:inline-block;
    			}
    
    			.ribbon:after, .ribbon:before {
    				margin-top:0.5em;
    				content: "";
    				float:left;
    				border:1.5em solid #fff;
    			}
    
    			.ribbon:after {
    				border-right-color:transparent;
    			}
    
    			.ribbon:before {
    				border-left-color:transparent;
    			}
    
    			.ribbon a:link, .ribbon a:visited { 
    				color:#000;
    				text-decoration:none;
    			    float:left;
    			    height:3.5em;
    				overflow:hidden;
    			}
    
    			.ribbon span {
    				background:#fff;
    				display:inline-block;
    				line-height:3em;
    				padding:0 1em;
    				margin-top:0.5em;
    				position:relative;
    
    				-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    				-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    				-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    				-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    				transition: background-color 0.2s, margin-top 0.2s;
    			}
    
    			.ribbon a:hover span {
    				background:#FFD204;
    				margin-top:0;
    			}
    
    			.ribbon span:before {
    				content: "";
    				position:absolute;
    				top:3em;
    				left:0;
    				border-right:0.5em solid #9B8651;
    				border-bottom:0.5em solid #fff;
    			}
    
    			.ribbon span:after {
    				content: "";
    				position:absolute;
    				top:3em;
    				right:0;
    				border-left:0.5em solid #9B8651;
    				border-bottom:0.5em solid #fff;
    			}
    
    		</style>
    	</head>
    	<body>
    		<div class='ribbon'>
    			<a href='#'><span>Home</span></a>
    			<a href='#'><span>About</span></a>
    			<a href='#'><span>Services</span></a>
    			<a href='#'><span>Contact</span></a>
    		</div>
    	</body>
    </html>

**用到的图片：**

![20141101170209216][]

**转载地址：**

[http://www.html5tricks.com/css3-3d-ribbon-menu.html][http_www.html5tricks.com_css3-3d-ribbon-menu.html]

[20141101170209216]: /images/20220810/a9f6f3b6e87c4a5a88dfac973291c400.png
[http_www.html5tricks.com_css3-3d-ribbon-menu.html]: http://www.html5tricks.com/css3-3d-ribbon-menu.html