css3实现下拉列表框

利用css3的新特性transition过渡特性实现下拉列表框（js方式前面已经实现）

transition 主要有四大特性

1.transition-property 过渡的属性

2.transition-duration 过渡持续的时间

3.transition-delay 过渡延迟指定的时间

4.transition-timing-function 过渡运动的曲线

linear 匀速
                   ease 慢快慢
                   ease-in 慢入
                   ease-out 慢出
                   ease-in-out 慢入慢出
                   cubic bezier 贝塞尔曲线

具体效果

效果图

代码如下

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="ydj">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>过渡变化</title>
		<style type="text/css">
			*{margin:0;padding:0;}
			ul,ol{list-style:none;}
			a{text-decoration:none;}
			img{border:0;}
			.wrap{
				width:303px;
				height: 30px;
				/* border:1px solid red; */
				margin:0 auto;
				color:#fff;
			}
			.wrap ul li{
				float:left;
				width:100px;
				height:30px;
				margin-right:1px;
				background-color:pink;
				line-height:30px;
				text-align:center;
				
			}
			.wrap ul ul{
				overflow:hidden;
				height:0px;
				/* opacity:0; */
				/* transform:translate(0,0); */
				/* transition:opacity 2s,transform; */
				transition:height 2s;
			}
			.wrap ul li:hover ul{
				/* transform:translate(0,10px); */
				/* opacity:1; */
				height:120px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>首页
					<ul>
						<li>公司介绍</li>
						<li>公司部门</li>
						<li>公司架构</li>
						<li>联系我们</li>
					</ul>
				</li>
				<li>衣服
					<ul>
						<li>夹克</li>
						<li>衬衫</li>
						<li>羽绒服</li>
						<li>大衣</li>
					</ul>
				</li>
				<li>裤子
					<ul>
						<li>毛裤</li>
						<li>秋裤</li>
						<li>牛子裤</li>
						<li>喇叭裤</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

css3的新特性可以简化代码，省去复杂的js代码。

css3实现下拉列表框

猜你喜欢