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 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

1.CSS Reset

浏览器对标签进行了默认设置,所以在我们没有定义样式的时候,会有五花八门的效果 不同的浏览器设置的默认样式是由差异,效果也会有差异。 因为浏览器对标签进行设置...

1142
来自专栏极乐技术社区

wxss学习《五》所有以a,b开头的属性

整理下小程序里所有的css属性吧,这样也能好查询,按照字母表列举: a 共有15个属性:其中9个为动画animation的属性。详情如下: ? ? 1.addi...

2288
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

1K7
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

23110
来自专栏BestSDK

5分钟掌握8个常用交互组件,轻松进阶原型设计

一、弹出菜单 弹出菜单是原型设计中最常用的组件,许多组件的使用方法也与它类似,熟练使用弹出菜单将会给您带来莫大的帮助。接下来我们从实际案例来看一看如何使用弹出菜...

39310
来自专栏前端说吧

JS - 可自动伸缩高度的文本框

change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

2882
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

1043
来自专栏青玉伏案

iOS开发之虾米音乐频道选择切换效果分析与实现

今天博客的内容比较简单,就是看一下虾米音乐首页中频道选择的一个动画效果的实现。之前用mask写过另外一种Tab切换的一种效果,网易云音乐里边的一种Tab切换效果...

2483
来自专栏大数据钻研

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中...

2824
来自专栏互联网软件技术

本地多图上传预览

2212

扫码关注云+社区

领取腾讯云代金券