<!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. int.TryParse非预期执行引发的思考 ASP.NET -- WebForm -- 给图片添加水印标记 Windows -- 使用批处理文件.bat删除旧文件

    int.TryParse非预期执行引发的思考   问题出现 这天在写一个页面,想谨慎些就用了int.TryParse,结果出问题了. 代码如下: Copy int id = 1000; //Reque ...

  2. Spark SQL and DataFrame Guide(1.4.1)——之DataFrames

    Spark SQL是处理结构化数据的Spark模块.它提供了DataFrames这样的编程抽象.同一时候也能够作为分布式SQL查询引擎使用. DataFrames DataFrame是一个带有列名的分 ...

  3. quartusii开发过程中路径不能出现空格或中文

    quartusii开发过程中路径不能出现空格或中文,否则软件出现.stf文件错误提示,开发环境搭建的时候也不能出现空格和中文,否则也会报错.

  4. Java字节码指令

    1. 简介 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的数字(称为操作码)以及跟随其后的零至多个代表此操作所需参数(称为操作数)而构成. 由于Java虚拟机采用面向操作数栈而不是寄存 ...

  5. atitit.软件gui按钮and面板---os区-----软链接,快捷方式

    atitit.软件gui按钮and面板---os区-----软链接,快捷方式 1. 硬链接 1 2. 二.软链接(符号链接)LN 1 3. 三.删除链接 2 4. 区别 2 5. 参考 3 1. 硬链 ...

  6. mplayer 全屏问题

    [root@ok home]# gedit ~/.mplayer/config # Write your default config options here! zoom=yes #加上这个参数!全 ...

  7. 信号处理函数(2)-sigismember()

    定义: int sigismember(const sigset_t *set,int signum);   表头文件: #include<signal.h>   说明: sigismem ...

  8. vue-router介绍

    vue-router学习 转自:https://my.oschina.net/u/1416844/blog/849971 1. vue-router介绍 vue-router把react-router ...

  9. jquery 取第一个兄弟节点

    1.HTML <table> <tr> <td>1</td> <td>abc</td> <td>def</td ...

  10. php html 转义

    html_entity_decode($string);htmlentities($string);htmlspecialchars($string);htmlspecialchars_decode( ...