下拉菜單模擬效果圖:
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模擬動(dòng)畫下拉菜單效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)網(wǎng)站的支持!
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。