CSS3 애니메이션 드롭다운 메뉴 효과 코드
- 零下一度원래의
- 2017-04-19 11:10:061879검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.