HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

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

2017-1-18 15:11| 发布者: admin| 查看: 1766| 评论: 1

摘要: 这是一款使用jquery和CSS3制作的带弹性动画效果的工具栏菜单特效。该工具栏菜单默认只显示一个圆形按钮,单点击按钮时,子菜单项会以弹性动画展开,效果非常炫酷。 ... ...

 使用方法

在页面中引入jquery和字体图标文件font-awesome.css。


 HTML结构

该工具栏菜单的HTML结构如下:

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" );
});

鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 linedd963 2017-4-7 00:13
魯迅先生就說過:將軍也**。性是美妙的,用美妙的事情調劑多彩的生活,創造出耀眼的業績,這才是偉丈夫。康熙、乾隆都有“三宮”、“六院”,粉黛無數。而流傳下來的卻是“康乾盛世”。想交個朋友 :男人尋樂秘密基地+L I N E:d d 9 6 3

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-26 03:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部