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's 1</li>
<li>This's 2</li>
<li>This's 3</li>
<li>This's 4</li>
<li>This's 5</li>
</ul>
</p>
</body>
</html>위 내용은 CSS3 애니메이션 드롭다운 메뉴 효과 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
