html5下拉菜单添加过渡效果(简单使用)

最新推荐文章于 2021-06-24 12:41:34 发布

aabWzq

最新推荐文章于 2021-06-24 12:41:34 发布

阅读量1.6k

点赞数

分类专栏： html5和css3 文章标签： html5 过渡效果

本文链接：https://blog.csdn.net/aabWzq/article/details/103207027

版权

html5和css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要是练习h5的过渡效果，没其他意义

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>html5</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			.menu{
				width:300px;
				margin:80px auto;
			}
			.item{
				float:left;
				cursor:pointer;
				text-align:center;
			}
			.item span{
				width:100px;
				height:30px;
				display:block;
				background-color:silver;
				line-height:30px;
			}
			.item ul{
				list-style:none;
				background-color:pink;
				display:none;
				/*此时给display设置过渡是没有效果的，
				因为过渡transition是从一个值到另一个值的过程，
				display没有具体的值*/
				transition-property:display;
				transition-duration:1s;
			}
			.item:hover ul{
				display:block;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="item">
				<span>item</span>
				<ul>
					<li>item_1</li>
					<li>item_2</li>
					<li>item_3</li>
					<li>item_4</li>
				</ul>
			</div>
			<div class="item">
				<span>item</span>
				<ul>
					<li>item_1</li>
					<li>item_2</li>
					<li>item_3</li>
					<li>item_4</li>
				</ul>
			</div>
			<div class="item">
				<span>item</span>
				<ul>
					<li>item_1</li>
					<li>item_2</li>
					<li>item_3</li>
					<li>item_4</li>
				</ul>
			</div>
		</div>
	</body>
</html>

此时过渡没有效果，我们可以把ul的高度设为0px，让过渡效果的属性为height，在hover添加一个具体的height，记得要设置overflow:hidden，不然内容也是不会隐藏的
代码如下

.item ul{
				height:0px;
				overflow:hidden;
				list-style:none;
				background-color:pink;
				transition-property:height;
				transition-duration:1s;
			}
			.item:hover ul{
				height:85px;
			}