<!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. Redis总结（五）缓存雪崩和缓存穿透等问题(转载)

    前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhong/category/771056.html .今 ...

  2. Ｃ# 基础: new 和 overrider 的区别

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. SDK Manager 闪退的解决方式

    打开电脑的执行  也就是win+R键    然后在命令行里面打上android即可了

  4. Jquery实现无刷新DropDownList联动

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. Mysql 逻辑运算符详解

    逻辑运算符又称为布尔运算符,用来确认表达式的真和假.MySQL 支持4 种逻辑运算符,如表4-3 所示. 表4-3                          MySQL 中的逻辑运算符 运算符 ...

  6. 使用 SSHFS 挂载远程的 Linux 文件系统及目录

    1. 安装 sudo apt-get install sshfs 2. 创建 SSHFS 挂载目录 sudo mkdir /mnt/cong 3.使用 SSHFS 挂载远程的文件系统 sudo ssh ...

  7. vsftp 无法启动，500 OOPS: bad bool value in config file for: anonymous_enable

    朋友的FTP启动不了,叫我帮他看,启动时出现以下错误信息: 500 OOPS: bad bool value in config file for: anonymous_enable 看似配置文件错误 ...

  8. putty自带工具plink自动登陆ssh

    PLINK.EXE -C -N -D 127.0.0.1:7000 root@111.111.111.111  -pw 123456 解释成中文: PLINK.EXE -启用数据压缩 -不要shell ...

  9. Atitit.分布式远程调用  rpc  rmi  CORBA的关系

    Atitit.分布式远程调用  rpc  rmi  CORBA的关系 1. 远程调用(包括rpc,rmi,rest)1 2. 分布式调用大体上就分为两类,RPC式的,REST式的1 3. RPC(远程 ...

  10. DIY一个基于树莓派和Python的无人机视觉跟踪系统

    DIY一个基于树莓派和Python的无人机视觉跟踪系统 无人机通过图传将航拍到的图像存储并实时传送回地面站差点儿已经是标配.假设想来点高级的--在无人机上直接处理拍摄的图像并实现自己主动控制要怎么实现 ...