CSS3模拟动画下拉菜单效果
程序员文章站
2023-12-03 20:49:10
使用css3制作的下拉菜单外观非常漂亮，在各大网站都适用，今天小编通过本文给大家分享基于css3制作的动画下拉菜单效果，需要的的朋友参考下吧... 17-04-12...
下拉菜单模拟效果图：
css3：
<style>
#box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
#box:hover{height:250px;}
#box ul{list-style:none; margin:0; padding:0;}
#box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}
</style>
html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<ul>
<li>this's 1</li>
<li>this's 2</li>
<li>this's 3</li>
<li>this's 4</li>
<li>this's 5</li>
</ul>
</div>
</body>
</html>
以上所述是小编给大家介绍的css3模拟动画下拉菜单效果，希望对大家有所帮助