顯示隱藏一個p特效的方法有很多,下為大家介紹下使用純css3是如何?的,感興趣的朋友可以參考下
代碼如下:
<!DOCTYPE HTML> <head> <script src="jquery-1.8.2.min.js"></script> <style> #showp { background-color:red; width:300px; height:300px; display:none; } .from-below, .from-below-to-below .effeckt-modal { -webkit-transform: 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").addClass("from-below"); setTimeout(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>
【相關推薦】
1. CSS3免費視頻教程
2. 關於CSS3中的content屬性執行個體詳解
3. 詳解CSS3中10個頂級命令
4. 簡述網頁設計師怎麼使用好CSS3技術
5. css3製作滑鼠經過按鈕特效