Heim > Artikel > Web-Frontend > CSS3 simuliert den animierten Dropdown-Menüeffekt

CSS3 simuliert den animierten Dropdown-Menüeffekt

巴扎黑Original: 2017-05-14 13:45:561335Durchsuche

Das mit CSS3 erstellte Dropdown-Menü sieht sehr schön aus und ist für alle wichtigen Websites geeignet. Heute werde ich Ihnen in diesem Artikel die Wirkung des auf CSS3 erstellten Dropdown-Menüs vorstellen Wer es braucht, kann darauf verweisen

Dropdown-Menü Simulationsrendering:

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>

Das obige ist der detaillierte Inhalt vonCSS3 simuliert den animierten Dropdown-Menüeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：30 CSS3-SelektorenNächster Artikel：30 CSS3-Selektoren

In Verbindung stehende Artikel

Mehr sehen