首页 > 代码库 > 【CSS3动画】下拉菜单模拟

【CSS3动画】下拉菜单模拟

2024-09-14 03:55:32   216人阅读

下拉菜单模拟效果图：

技术分享

 

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动画】下拉菜单模拟


联系
我们