css3 javascript 实现菜单按钮特效
一个菜单按钮特效案例,简单的实现了动态效果。
代码效果预览地址:
http://code.w3ctech.com/detail/2504
<div class="bar" id="menubar"><div class="menu" id="menu0"></div><div class="menu" id="menu1"></div><div class="menu" id="menu2"></div> </div>
1 .bar{ 2 width:40px; 3 height:40px; 4 border:1px solid #ccc; 5 border-radius:50%; 6 position:fixed; 7 top:10px; 8 right:25px; 9 z-index:1000; 10 cursor:pointer; 11 } 12 .menu{ 13 width:20px; 14 height:2px; 15 background-color:#ccc; 16 position:absolute; 17 transform:translate3d(-50%,-50%,0); 18 left:50%; 19 transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 20 } 21 #menu0{ 22 top:30%; 23 } 24 #menu1{ 25 top:50%; 26 } 27 #menu2{ 28 top:70%; 29 }
1 window.onload = function () { 2 var menubar = document.getElementById("menubar"); 3 var menu0 = document.getElementById("menu0"); 4 var menu1 = document.getElementById("menu1"); 5 var menu2 = document.getElementById("menu2"); 6 var i = 0; 7 menubar.onclick = function () { 8 i++; 9 if (i % 2 == 1) { 10 menu0.style.top = 50 + "%"; 11 menu1.style.display = "none"; 12 menu2.style.top = 50 + "%"; 13 menu0.style.transform = "translate3d(-50%,-50%,0) rotate(135deg)"; 14 menu2.style.transform = "translate3d(-50%,-50%,0) rotate(405deg)"; 15 } 16 else { 17 menu0.style.transform = "translate3d(-50%,-50%,0) rotate(0deg)"; 18 menu2.style.transform = "translate3d(-50%,-50%,0) rotate(0deg)"; 19 menu0.style.top = 30 + "%"; 20 menu2.style.top = 70 + "%"; 21 menu1.style.display = "block"; 22 } 23 } 24 25 }
转载于:https://www.cnblogs.com/younth/p/5183412.html
css3 javascript 实现菜单按钮特效相关推荐
- CSS3白色质感3D按钮特效源码
这是一款css3白色质感3D按钮特效.该按钮使用svg做为图标,通过css3代码,打造出非常炫酷的3d按钮效果. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mf75 ...
- html5列表菜单特效,HTML5 SVG汉堡包菜单按钮分段动画特效
这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效.该菜单按钮特效在用户点击汉堡包按钮时,按钮会分割为多段,并旋转变形为关闭按钮的状态.当再次点击该按钮时,它会逆向变形为汉堡包图标. ...
- html网站点击特效,HTML5 svg和CSS3炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
- html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: < ...
- 【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
- 汉堡式折叠html,3种超酷汉堡包菜单按钮变形动画特效
这是一款使用CSS3和少量jQuery代码来完成的汉堡包菜单按钮变形动画特效.该特效使用CSS3 transition 和 transform 来完成变形动画效果,使用jQuery来触发按钮点击事件. ...
- html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)
网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑 锁定 讨论 上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...
最新文章
- jeecms系统_自定义对象流程
- .NET全栈开发工程师学习路径
- Android之CheckBox进行代码设置setChecked(true)会触发setOnCheckedChangeListener事件
- 【优化覆盖】基于matlab模因算法求解集群无线传感器网络中节能覆盖控制优化问题【含Matlab源码 1563期】
- ERR Errors trying to SHUTDOWN. Check logs.
- [WEB]超牛的前端页面模板收集
- Gartner首发中国数据库市场指南,巨杉数据库代表数据库领域厂商入选
- 川土微电子|数字隔离器替代光耦817
- Bean Validation——自定义注解
- 重学 statistics, Cha10 Inference About Means and Proportions with Two Populations
- java实现微信企业号API服务端调用封装
- 如何查看你的浏览器的Flash版本
- canvas画出闪瞎眼的简单图形
- java实现生日提醒_生日提醒功能-SQL查询语句在Java中肿么运用?
- Java 正则验证邮箱
- SQL 使用ADD_MONTHS或ADDDATE实现RFM参数—R(Recency)
- 爬虫入门-爬取有道在线翻译结果(2)
- 清理autodesk产品注册表_关于Autodesk软件的删除方法
- java字符乱码问题_怎么解决java中的字符乱码问题
- The style on this component requires your app theme to be Theme解决
热门文章
- 关于bin和obj文件夹。debug 和release的区别(转)
- TCP拥塞状态机的实现(中)
- 系统操作日志设计(二)
- s5p4418 Android 4.4.2 驱动层 HAL层 服务层 应用层 开发流程记录(二 硬件抽象层HAL 第二种 ioctl操作方法)
- drf1 rest restful规范
- nginx+php+memcache高速缓存openresty)
- linux rmi端口,RMI 两个端口 - 差不多先生的个人空间 - OSCHINA - 中文开源技术交流社区...
- 阿里云资深技术专家李克畅谈边缘云计算趋势与实践
- 揭秘下一代云数据库引擎MyBasefor PostgreSQL
- 下载 | 新版Java开发手册有哪些亮点?