簡要教學
這是一款使用jquery和CSS3製作的彈性動畫效果的工具列選單特效。此工具列選單預設只顯示一個圓形按鈕,單點擊按鈕時,子選單項目會以彈性動畫展開,效果非常酷。
使用方法
在頁面中引入jquery和字體圖示檔案font-awesome.css。
<link rel="stylesheet" href="css/font-awesome.min.css"> <script src="path/to/jquery.min.js"></script>
HTML結構
該工具列選單的HTML結構如下:
<div id="wrapper"> <div id="toolbar"> <div class="button"></div> <ul class="icons"> <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li> </ul> </div> </div>
CSS樣式
為此工具列選單的HTML結構如下:
#wrapper { text-align:center; font-family: 'Lato', sans-serif; text-transform:uppercase; } #toolbar { width:100%; max-width:670px; min-width:550px; margin: 70px auto; } .button { width:70px; height:70px; border-radius:50%; background-color:#3AB09E; color:#ffffff; text-align:center; font-size:3.5em; position:relative; left:50%; margin-left:-35px; z-index:1; } .button,.icons{ -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44); transition: all 1s cubic-bezier(.87,-.41,.19,1.44); } .button:after { content:"+"; } .button.active { -webkit-transform: rotate(45deg); transform: rotate(45deg); left:60px; } .icons { width:0%; overflow:hidden; height:36px; list-style:none; padding:16px 10px 10px 50px; background-color:#ffffff; box-shadow: 1px 1px 1px 1px #DCDCDC; margin:-68px 0 0 45%; border-radius: 2em; } .icons.open { width:80%; margin:-68px 0 0 5%; overflow:hidden; } .icons li { display: none; width:10%; color:#3AB09E; } .icons.open li { width:16%; display: inline-block; }
CSS樣式
為此工具列選單加入如下的CSS樣式:
$( ".button" ).click(function() { $(this).toggleClass( "active" ); $(".icons").toggleClass( "open" ); });
下面的jquery程式碼來開啟和關閉工具列選單。
rrreee以上就是jquery和CSS3有彈性動畫效果的工具列選單的內容,更多相關內容請關注PHP中文網(www.php.cn)!