js+css特效菜单栏

最新推荐文章于 2024-09-20 16:06:21 发布

莫兰迪不会没有瓶子

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量131

点赞数

文章标签： xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 
	This technique is originally authored by Elliott Rothman, elliottrothman.com
	Feel free to use, improve, build upon it in any way you can, there is no copyright or anything.
	Similiar terms to the CC Share alike agreement.
	Enjoy this experiment with the webkit proposed CSS3 properties!
-->
<html>
	<head>
		<title>CSS3 Smoothie Slider Menu | Elliott Rothman</title>
		<style type="text/css" media="screen">
			
			/* clear styles */
			* { margin:0; padding:0 }
			:link,:visited { text-decoration:none }
			a img,:link img,:visited img { border:none }
			ul,ol,dl { list-style:none }
			h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
			
			/* basic fonts, colors */
			
			body
			{
				font-family: Helvetica, Arial, Geneva;
				font-size: 11px;
			}
			
			h1
			{
				font-size: 13px;
			}
			
			#wrapper
			{
				
			}
			
			ul.smoothie
			{
				margin-bottom: 20px;
			}
			
			ul.smoothie li
			{
				-webkit-transition-property: margin-left;
				-webkit-transition-duration: 500ms;
				width: 200px;
				border-top:2px solid #efefef;
				display: block;
				margin-left:0;
			}
			
			ul.smoothie li:hover
			{
				margin-left: 10px;
			}
			
			ul.smoothie li a
			{
				-webkit-transition-property: color, background-color, padding-left, -webkit-box-shadow;
				-webkit-transition-duration: 500ms, 500ms, 500ms, 500ms;
				background-color: #fff;
				color: #afafaf;
				padding-left: 0;
				padding-top: 10px;
				padding-bottom: 10px;
				-webkit-box-shadow: 0 0 0 rgba(0,0,0,0)
			
			}
			
			ul.smoothie li a:link
			{
				
			}
			
			ul.smoothie li a:link, ul.smoothie li a
			{
				display:block;
				
				 
			}
			
			ul.smoothie li a:hover
			{
				
				background-color: #efefef;
				color: #333;
				padding-left: 15px;
				-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
				z-smoothie: 2;
				
			}

		</style>
	</head>
	<body>
	<div id="wrapper"></div>
		<h1>CSS3 Smoothie Slider Menu</h1><br/>
		<ul class="smoothie">
			<li><a href="#">Lorem</a></li>
			<li><a href="#">Ipsum</a></li>
			<li><a href="#">Dolor</a></li>
		</ul>
		<br/>
	</div>
	</body>
</html>