jquery+CSS3模拟Path2.0动画菜单效果代码


Posted in Javascript onAugust 31, 2015

本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码。分享给大家供大家参考。具体如下:

CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果。

CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅。Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋友可以研究一下解决方法。

运行效果截图如下:

jquery+CSS3模拟Path2.0动画菜单效果代码

在线演示地址如下:

具体代码如下:

<title>CSS3模拟手机软件Path2.0动画菜单</title>
<script src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body { background:#f1eee7}
.phone { width:320px; height:480px; border:#000 solid 1px; position:absolute;}
.menu { width:47px; height:47px; border-radius:47px; border:#fff solid 6px; box-shadow: 0 2px 5px 1px #aaa; cursor:pointer; position:absolute; bottom:15px; left:15px; z-index:10;
background:#c72d15;
background:-webkit-gradient(linear, left top, left bottom, from(#d45753), to(#c22e10), color-stop(0.5, #d63523), color-stop(0.5, #d1261c));}
.menu span { display:block; width:27px; height:27px; background:url(images/bg1.png); text-indent:-999px; position:absolute; top:50%; left:50%; margin-top:-13px; margin-left:-13px; overflow:hidden;}
.btn { width:36px; height:36px; border-radius:36px; border:#fff solid 6px; box-shadow: 0 2px 5px 1px #aaa; cursor:pointer; background:#3b3b3b; position:absolute; bottom:0; left:0; margin-bottom:20px; margin-left:20px;}
.btn span { display:block; width:22px; height:24px; text-indent:-999px; position:absolute; top:50%; left:50%; margin-top:-12px; margin-left:-11px; overflow:hidden; background:url(images/bg1.png) no-repeat;}
.btn1 span { background-position:-27px 0; }
.btn2 span { background-position:-49px 0; }
.btn3 span { background-position:-71px 0; }
.btn4 span { background-position:-93px 0; }
.btn5 span { background-position:-115px 0; }
.btn {
 -webkit-animation-duration:0.3s;
 -webkit-animation-iteration-count:1;
}
/*主菜单*/
@-webkit-keyframes open {
 0%{ -webkit-transform:rotate(0)}
 100%{ -webkit-transform:rotate(-225deg)}
}
@-webkit-keyframes close{
 0%{ -webkit-transform:rotate(45deg)}
 100%{ -webkit-transform:rotate(270deg)}
}
.menu span{
 -webkit-animation-duration:0.5s;
 -webkit-animation-iteration-count:1;
}
.menu span.open {
 -webkit-animation-name:open;
 -webkit-transform:rotate(-225deg);
}
.menu span.close {
 -webkit-animation-name:close;
 -webkit-transform:rotate(270deg);
}
/*照相按钮*/
@-webkit-keyframes btn1open {
 0%{ -webkit-transform:translate(0,175px);}
 20%{ -webkit-transform:translate(0,-10px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn1close{
 0%{ -webkit-transform:translate(0,-185px);}
 90%{ -webkit-transform:translate(0,-175px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn1.open {
 -webkit-animation-name:btn1open;
 bottom:175px;
 left:0;
}
.btn1.close {
 -webkit-animation-name:btn1close;
 bottom:0;
 left:0;
}
/*位置按钮*/
@-webkit-keyframes btn2open {
 0%{ -webkit-transform:translate(-70px,160px);}
 30%{ -webkit-transform:translate(5px,-10px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn2close{
 0%{ -webkit-transform:translate(75px,-170px);}
 70%{ -webkit-transform:translate(70px,-160px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn2.open {
 -webkit-animation-name:btn2open;
 bottom:160px;
 left:70px;
}
.btn2.close {
 -webkit-animation-name:btn2close;
 bottom:0;
 left:0;
}
/*音乐按钮*/
@-webkit-keyframes btn3open {
 0%{ -webkit-transform:translate(-130px,120px);}
 50%{ -webkit-transform:translate(10px,-10px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn3close{
 0%{ -webkit-transform:translate(140px,-135px);}
 50%{ -webkit-transform:translate(130px,-120px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn3.open {
 -webkit-animation-name:btn3open;
 bottom:125px;
 left:130px;
}
.btn3.close {
 -webkit-animation-name:btn3close;
 bottom:0;
 left:0;
}
/*聊天按钮*/
@-webkit-keyframes btn4open {
 0%{ -webkit-transform:translate(-160px,65px);}
 70%{ -webkit-transform:translate(10px,-5px);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn4close{
 0%{ -webkit-transform:translate(170px,-70px);}
 30%{ -webkit-transform:translate(160px,-65px);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn4.open {
 -webkit-animation-name:btn4open;
 bottom:65px;
 left:160px;
}
.btn4.close {
 -webkit-animation-name:btn4close;
 bottom:0;
 left:0;
}
/*夜间按钮*/
@-webkit-keyframes btn5open {
 0%{ -webkit-transform:translate(-175px,0);}
 90%{ -webkit-transform:translate(10px,0);}
 100%{ -webkit-transform:translate(0, 0);}
}
@-webkit-keyframes btn5close{
 0%{ -webkit-transform:translate(185px,0);}
 10%{ -webkit-transform:translate(175px,0);}
 100%{ -webkit-transform:translate(0, 0);}
}
.btn5.open {
 -webkit-animation-name:btn5open;
 bottom:0;
 left:175px;
}
.btn5.close {
 -webkit-animation-name:btn5close;
 bottom:0;
 left:0;
}
</style>
<p>由于代码运行框缺陷,请先刷新一下页面动画运行更流畅</p>
<div class="phone">
 <div class="menu"><span>菜单</span></div>
 <div class="btn btn1"><span>照相</span></div>
 <div class="btn btn2"><span>位置</span></div>
 <div class="btn btn3"><span>音乐</span></div>
 <div class="btn btn4"><span>聊天</span></div>
 <div class="btn btn5"><span>夜间</span></div>
</div>
<script>
$(".menu").click(function(){
 var span = $(this).find("span");
 if(span.attr("class") == "open"){
  span.removeClass("open");
  span.addClass("close");
  $(".btn").removeClass("open");
  $(".btn").addClass("close");
 }else{
  span.removeClass("close");
  span.addClass("open");
  $(".btn").removeClass("close");
  $(".btn").addClass("open");
 }
});
</script>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
jquery选择器简述
Aug 31 #Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP生成图片验证码功能示例
2017/01/12 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Python常用数据分析模块原理解析
2020/07/20 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
维也纳通行证:Vienna PASS
2019/07/18 全球购物
即将毕业大学生自荐信
2014/01/24 职场文书
政治思想表现评语
2014/05/04 职场文书
房屋转让协议书
2014/10/18 职场文书
先进党组织事迹材料
2014/12/26 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
《为人民服务》教学反思
2016/02/20 职场文书