jquery和CSS3带弹性动画效果的工具栏菜单

来源：动视网责编：小采时间：2020-11-27 20:26:25

jquery和CSS3带弹性动画效果的工具栏菜单

jquery和CSS3带弹性动画效果的工具栏菜单:简要教程这是一款使用jquery和CSS3制作的带弹性动画效果的工具栏菜单特效。该工具栏菜单默认只显示一个圆形按钮，单点击按钮时，子菜单项会以弹性动画展开，效果非常炫酷。使用方法在页面中引入jquery和字体图标文件font-awesome.css。<link

推荐度：

点击下载本文 文档为doc格式

导读jquery和CSS3带弹性动画效果的工具栏菜单:简要教程这是一款使用jquery和CSS3制作的带弹性动画效果的工具栏菜单特效。该工具栏菜单默认只显示一个圆形按钮，单点击按钮时，子菜单项会以弹性动画展开，效果非常炫酷。使用方法在页面中引入jquery和字体图标文件font-awesome.css。<link

简要教程

这是一款使用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样式

为该工具栏菜单添加如下的CSS样式：

#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;
}

初始化插件

在页面DOM元素加载完毕之后，通过下面的jquery代码来打开和关闭工具栏菜单。

$( ".button" ).click(function() {
 $(this).toggleClass( "active" );
 $(".icons").toggleClass( "open" );
});

jquery和CSS3带弹性动画效果的工具栏菜单

推荐度：

点击下载本文 文档为doc格式

标签：菜单工具栏 css3

热门焦点

jquery和CSS3带弹性动画效果的工具栏菜单

jquery和CSS3带弹性动画效果的工具栏菜单

jquery和CSS3带弹性动画效果的工具栏菜单

最新推荐

猜你喜欢

热门推荐