<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>导航图标的改变</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 100px;

            margin: 100px auto;

            transform-origin:50% 50%;

        }

        span {

            display: inline-block;

            width: 100%;

            height: 1px;

            border-bottom: 1px solid lightgray;

            transition: all .6s;

            transform-origin:50% 50%;

        }

        .test0 {

            transform: rotate(45deg) translateY(25px);

        }

        .test2 {

            transform: rotate(-45deg) translateY(-25px);

        }

        .test1 {

            opacity: 0;

        }

    </style>

</head>

<body>

<div>

    <span></span>

    <span></span>

    <span></span>

</div>

</body>

<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>

<script>

    $(() => {

        $("div").on("click", (e) => {

            $(e.target).find("span").map((index, item) => {

                     $(item).toggleClass(`test${index}`);

            })

        })

    })

</script>

</html>

　　

css+jq写的小小的移动端按钮的动画改变（三个很闲变成一个叉号）的更多相关文章

  1. css+javascript 写的HTML5 微信端输入支付密码键盘

    微信端没有纯数字键盘,用html5写了一个模仿ios输入支付密码键盘效果 keyboard.js var _keyboard = {}; $(document).ready(function(){ _ ...

  2. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  3. 最近在用placeholder ,是已有的，网上也有不少都是jq写的

    其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人 ...

  4. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  5. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  6. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  7. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  8. JQuery和html+css实现带小圆点和左右按钮的轮播图

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...

  9. 从零开始写STL-容器-双端队列

    从零开始写STL-容器-双端队列 什么是双端队列?在介绍vector源码,我们发现在vector前端插入元素往往会引起大量元素的重新分配,双端队列(deque)就是为了解决这一问题,双端队列中在首端和 ...

随机推荐

  1. 自增长主键Id的设计

    http://www.cnblogs.com/lhking/p/3945865.html

  2. Docker入门二

    容器管理 1.docker create创建一个容器,但容器并没启动,就和我们创建虚拟机一样,创建了虚拟机后没启动 [root@centos-02 ~]# docker create -it cent ...

  3. 多国语言解决方案gnu.gettext + poedit

    1.工具简介 1.1.关于i18n i18n其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数是“国际化”的简称. i10n为资源本地化,全称为Locali ...

  4. Atititjs javascript异常处理机制与java异常的转换.js exception process

    Atititjs javascript异常处理机制与java异常的转换.js exception process 1. javascript异常处理机制 Throw str Not throw err ...

  5. solr 简单搭建 数据库数据同步（待续）

    原来在别的公司负责过文档检索模块的维护(意思就是不是俺开发的啦). 所以就略微接触和研究了下文档检索. 文档检索事实上是全文检索.是通过一种技术把N多文档进行一定规律的分割归类,然后创建易于搜索的索引 ...

  6. yii2中的资源....

    1.模板文件中访问view和controller,view : $this,controller :$this->context 模板文件显示流程: 1.控制器会在render中,把控制器本身, ...

  7. 移动端rem的用法

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  8. QT 中设置按钮图片和文字的两种方法

    1.使用QpushButton自带的API实现: void setIcon(const QIcon &icon) void setText(const QString &text) 该 ...

  9. hadoop3: mkdir: cannot create directory `/usr/local/hadoop/bin/../logs’: Permission denied

    1.hadoop3: mkdir: cannot create directory `/usr/local/hadoop/bin/../logs': Permission denied把所有Datan ...

  10. 基于Redis实现延时队列服务

    背景 在业务发展过程中,会出现一些需要延时处理的场景,比如: a.订单下单之后超过30分钟用户未支付,需要取消订单 b.订单一些评论,如果48h用户未对商家评论,系统会自动产生一条默认评论 c.点我达 ...