Rumah > Artikel > hujung hadapan web > CSS3模拟动画下拉菜单效果

CSS3模拟动画下拉菜单效果

巴扎黑asal: 2017-05-14 13:45:561366semak imbas

使用css3制作的下拉菜单外观非常漂亮，在各大网站都适用，今天小编通过本文给大家分享基于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>
        <p id="box">
            <ul>
                <li>This&#39;s 1</li>
                <li>This&#39;s 2</li>
                <li>This&#39;s 3</li>
                <li>This&#39;s 4</li>
                <li>This&#39;s 5</li>
            </ul>
        </p>
    </body>
</html>

Atas ialah kandungan terperinci CSS3模拟动画下拉菜单效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：30个CSS3选择器Artikel seterusnya：CSS实现Tab布局实例展示

Artikel berkaitan

Lihat lagi