這篇文章主要介紹了關於如何實現用css3顯示隱藏一個div特效,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
顯示隱藏一個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>
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
以上是如何實作用css3顯示隱藏一個div特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!