要写一个下拉菜单点击按钮 菜单入口就是是点击一个图标按钮 之前都是随便用个图片代替 今天突然想用CSS写个效果 主要参考澎湃移动端右上角的按钮
效果:
HTML
//vue 中通过点击事件改变class <div class="burger" style="float: right;" :class="{'transform':rightTopBtn}" @click.stop="rightTopBtn=!rightTopBtn" > <div></div> <div></div> <div></div> </div>
CSS
<!--按钮容器 START--> .burger { cursor: pointer; display: inline-block; margin: 7px 6px 0 0; outline: none; } <!--按钮容器 END--> <!--三条横线 通过rotate3d实现旋转 START--> .burger div { width: 30px; height: 4px; margin-bottom: 6px; background-color: rgb(51, 51, 51); transform: rotate3d(0, 0, 0, 0); } <!--三条横线 END--> .burger.transform div { background-color: transparent; } .burger.transform div:first-of-type { top: 10px; transform: rotate3d(0, 0, 1, 45deg) } .burger.transform div:last-of-type { bottom: 10px; transform: rotate3d(0, 0, 1, -45deg) } <!--点击后第一个和第三个横线的效果 START--> .burger.transform div:first-of-type, .burger.transform div:last-of-type { transition: transform .4s .3s ease, background-color 250ms ease-in; background: #00c1de; } <!--点击后第一个和第三个横线的效果 END--> <!--取消点击后恢复动画 START--> .burger div:first-of-type, .burger div:last-of-type { transition: transform .3s ease .0s, background-color 0ms ease-out; position: relative; } <!--取消点击后恢复动画 END-->
只用transition也是能达到 animation的效果的 通过设置不同属性的变化 掌握好变化时间 和延时的时间 就可以让动画有先后顺序
总结
以上所述是小编给大家介绍的CSS实现菜单按钮动画,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
前言: 在ietester 里面用debugbar查看文档代码,每个ul li里面都有这个 text: e...
XLink是一种基于属性的语法,用来在XML文档中添加链接。XLink链接可以是单向的,...
1 概述 本文主要讲解了 Java 里面线程池的接口以及实现类,以及它们的基本使用方...
dreamweaver怎么把常用工具添加到收藏夹,我们用dreamweaver的时候,有个几个工...
最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,...
运维工程师这个岗位不同于后端开发岗位,到底运维工程师平时做什么? 老司机告诉...
想法: 想把a href=# target=_blankBBBBBBB/a 替换成 a href=http://www.yourdom...
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前...
在传统的 web 优化中,我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小...
作用:跳转到上一个页面或下一个页面。 元素:分页的基本元素有:上页+页码+下页...