Home > Article > Web Front-end > Example tutorial of showing and hiding divs with css3
There are many ways to show and hide a p special effect. The following is an introduction to how to implement it using pure CSS3. Interested friends can refer to the
The code is as follows:
<!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>
[ Related recommendations】
2. Detailed explanation of examples of content attribute in CSS3
3 . Detailed explanation of the 10 top commands in CSS3
4. Brief description of how web designers can use CSS3 technology well
5. css3 Create mouse over button effects
The above is the detailed content of Example tutorial of showing and hiding divs with css3. For more information, please follow other related articles on the PHP Chinese website!