专栏首页地方网络工作室的专栏css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果

需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo

设计师给了俩图片,一个是 这样的菜单图标,另一个是点击时,变成 X 的图标。希望在这两个图标之间,有动画切换效果。

效果演示地址:http://runjs.cn/detail/al9vgagm

因为图标非常简单,我们可以用 css 把这俩图标画出来,然后做一个动画的过度效果就可以了。代码如下:

html代码

  <div class="box">
    <div class="menu"></div>
  </div>

外面的 .box 只是为了撑开页面,没有实际作用。有用的,就是一个 .menu

CSS 代码

.box { margin: 200px; }

.menu { width: 100px; height: 100px; position: relative; }
.menu:before, .menu:after { content: ""; display: block; width: 100px; height: 16px; background: #000; border-radius: 8px; position: absolute; left: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.menu:before { top: 5px; box-shadow: 0 37px #000; }
.menu:after { bottom: 5px; }
.menu:hover:before { top: 42px; box-shadow: none; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.menu:hover:after { bottom: 42px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

重点解释:

一个元素给加上了 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秒,为的是看清楚动画细节效果。

其实,会了这个思路,我们可以做很多简单的动画效果的。

如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3 做一个有闪光效果的进度条

    CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

    FungLeo
  • 将移动硬盘上的archlinux复制到笔记本电脑硬盘并引导

    将移动硬盘上的archlinux复制到笔记本电脑硬盘并引导 每次安装archlinux我都非常痛苦,在同事的协助下才能完成。为了避免这个问题,我在我的移动硬盘上...

    FungLeo
  • Python3 初学实践案例(2)将源目录中的图片用MD5命名并可以设定目标目录

    Python3 初学实践案例(2)将源目录中的图片用MD5重命名后移动或复制到目标文件夹 尝试了一下用 python 实现了一个生成密码的程序。感觉还是比较好上...

    FungLeo
  • 用CSS3绘制iPhone手机

    本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《用CSS3绘制iPhone手机》

    阿珏
  • CSS构造模型与动态布局

    版权声明:本文为博主原创文章,转载请注明出处。 ...

    魏晓蕾
  • 【前端艺术】CSS3图片鼠标悬停动画特效代码

    该代码实现CSS3图片鼠标悬停动画特效。鼠标/手指悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。

    用户5997198
  • 共享个地图控件的样式

    源代码下载地址:http://download.csdn.net/detail/gisshixisheng/9008937

    lzugis
  • 第19天:京东头部小三角制作

    半指温柔乐
  • 可视化格式模型-clear特性

    ‘clear’特性 该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatt...

    练小习
  • CSS 预处理语言 Less

    Less 是一门 CSS 预处理语言,作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法,增加了诸如变量、混...

    Nian糕

扫码关注云+社区

领取腾讯云代金券