CSS3模拟动画下拉菜单效果
下拉菜单模拟效果图：
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模拟动画下拉菜单效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
相关文章
Laurie
2020-11-30
Radinka
2021-05-02
Dabria
2020-01-05
Valora
2021-03-03
Tani
2023-04-19
Tanisha
2023-04-19
Ipo
2023-05-12
Pearl
2023-05-12
Dulcea
2023-05-12
Sabah
2023-05-12
Helen
2023-05-12
Malinda
2023-05-13
Antonia
2023-05-17
Thalia
2023-05-17
Malinda
2023-05-18
Sabah
2023-07-20
Glory
2023-07-20
Isleta
2023-07-20