P 특수 효과를 표시하고 숨기는 방법은 여러 가지가 있습니다. 다음은 순수 CSS3를 사용하여 이를 달성하는 방법에 대한 소개입니다. 관심 있는 친구는
코드는 다음과 같습니다.
<!DOCTYPE HTML> <head> <script src=" jquery -1.8.2.min. js "></script> <style> #showp { background-color :red; width : 300 px; height :300px; display :none; } .from-below, .from-below-to-below .effeckt-modal { -webkit-trans for m: translateX(100%); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-transition: all 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show, .effeckt-show.from-below-to-below .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .effeckt-show .effeckt-modal { visibility : visible; } </style> <script> function show(){ $("#showp").show(); $("#showp").add Class ("from-below"); set Time out(function(){$("#showp").addClass("effeckt-show");},300); } function hide(){ $("#showp").removeClass("effeckt-show"); } </script> </head> <body class="sapUiBody"> <input type="button" id="bt" value="show" onClick ="show()"> <input type="button" id="bt" value="hide" onClick="hide()"> <p id="showp" class=""> <h1>aaaaa</h1> </p> </body>
【 관련 추천】
3 . CSS3의 10가지 주요 명령에 대한 자세한 설명
4. 웹 디자이너가 CSS3 기술을 잘 활용할 수 있는 방법에 대한 간략한 설명
5. css3 마우스 오버 버튼에 대한 특수 효과 만들기
위 내용은 CSS3를 사용하여 div를 표시하고 숨기는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!