简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

CSS3 animation drop-down menu effect code

零下一度
Release： 2017-04-19 11:10:06
Original
1829 people have browsed it

The drop-down menu made using css3 has a very beautiful appearance and is applicable to all major websites. Today, through this article, I will share with you the effect of the animated drop-down menu made based on css3. Friends who need it can refer to it

Drop-down menu simulation rendering:

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>
Copy after login

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>
Copy after login

The above is the detailed content of CSS3 animation drop-down menu effect code. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css3 Drop-down menu
source：php.cn
Previous article：Code example to disable selected text through CSS rules Next article：Detailed explanation of vertical-align attribute examples in css
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！