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下判断一个元素是否存在的代码
Mar 05 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php 无限级缓存的类的扩展
2009/03/16 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
微信支付开发发货通知实例
2016/07/12 PHP
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python提取log文件内容并画出图表
2019/07/08 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
办公室保洁员岗位职责
2013/12/02 职场文书
煤矿安全协议书
2014/08/20 职场文书
党员民主评议总结
2014/10/20 职场文书
邹越演讲观后感
2015/06/15 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
通知怎么写?
2019/04/17 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers