css3 做一个会动的菜单 menu 按钮动画效果
来源:互联网 发布:韩顺平javascript视频 编辑:程序博客网 时间:2024/05/17 04:09
css3 做一个会动的菜单 menu 按钮动画效果
需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo
。
设计师给了俩图片,一个是 三
这样的菜单图标,另一个是点击时,变成 X
的图标。希望在这两个图标之间,有动画切换效果。
效果演示地址:http://runjs.cn/detail/al9vgagm
因为图标非常简单,我们可以用 css
把这俩图标画出来,然后做一个动画的过度效果就可以了。代码如下:
html代码
- 1
- 2
- 3
外面的 .box
只是为了撑开页面,没有实际作用。有用的,就是一个 .menu
。
CSS 代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
重点解释:
一个元素给加上了 transition: all 0.15s ease-in-out;
这样的代码,那么当他的任何属性发生变化的时候,都会有切换效果。更多内容请参考 CSS3 transition 属性
因为有三个横线,所以 :before
和 :after
两个伪元素还不够。我不愿意再去额外添加一个元素,使有更多的东西可以控制。所以,我用了一个 box-shadow: 0 37px #000;
阴影的方式,实现中间的那个横线的效果。 :before
和 :after
分别放在上面和下面。
切换 X
的时候,只有两个元素,我只要把上面添加的阴影给去掉即可 box-shadow: none;
。
然后就是位置的变化,和添加旋转了。位置变化不表。旋转使用了 transform: rotate(225deg);
这个属性来实现。更多内容,请参考 CSS3 transform 属性
最终实现效果如下:
好,效果就实现了。上面的动画我是放到切换实现3秒,为的是看清楚动画细节效果。
其实,会了这个思路,我们可以做很多简单的动画效果的。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。
- css3 做一个会动的菜单 menu 按钮动画效果
- css3 做一个会动的菜单 menu 按钮动画效果
- HTML5+CSS3 做一个灵动的动画 TAB 切换效果
- 【代码笔记】iOS-点击一个按钮会出现多个按钮的动画效果
- Tweened 动画资源 -Menu 菜单按钮
- 【转载】 25 个实用的 CSS3 动画按钮/菜单教程
- css3做一个简单的加载效果
- CSS3打造的10种创意动画菜单效果
- CSS3 实现导航菜单的 3D 翻转动画效果
- 用css3和javascript做的径向动画菜单
- 一个动画效果很棒的分享按钮。
- 使用HTML5的canvas做一个会动的时钟
- 使用HTML5的canvas做一个会动的时钟
- 使用HTML5的canvas做一个会动的时钟
- 仿的一个动画菜单效果
- 一个DIV做的LODING动画CSS3动画
- css3的动画效果
- CSS3的动画效果
- 深入理解Java:类加载机制及反射
- Python学习(1)
- Android 过时jar包添加
- docker 启动Jenkins镜像
- google浏览器flash插件
- css3 做一个会动的菜单 menu 按钮动画效果
- Winform中利用委托实现窗体之间的传值
- 第一周9.12
- realflow2013中文版
- Gradle 完整指南(Android)
- 超详细 Spring @RequestMapping 注解使用技巧
- myeclipse安装android开发环境全过程
- wordpress 根据ID快捷插入评论
- 8款纯CSS3搜索框