<!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. 设置或者得到CheckBoxList选中了的值

    在项目中我们可能会经常遇到一收集多选信息的情况,比如做注册的时候要收集个人爱好,那时候大家第一个想到的肯定是CheckBoxList.那我们怎么来获取到CheckBoxList的值并且存入数据库呢?? ...

  2. Informix ConnetionString Pool Size

    Database=aa;Host=127.0.0.1;Server=ol_svr_custom;Service=9000;Protocol=onsoctcp;UID=informix;Password ...

  3. Oracle10g 安装步骤

    一.Oracle10g 安装预备步骤 取得 Oracle 10g 安装程序,或从 Oracle 技术网(OTN)下载光盘映像.在评估阶段您可以免费下载和使用无技术限制的全功能 Oracle,但在正式的 ...

  4. C数据结构-栈和队列,括号匹配举例---ShinePans

    1.栈和队列是两种特殊的线性表             运算操作被限定仅仅能在表的一端或两端插入,删除元素,故也称它们为限定的线性表结构 2.栈的基本运算 1).Stackinit(&s) 构 ...

  5. NYOJ 467 中缀式变后缀式

    做了表达式求值那道题之后做的 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 人们的日常习惯是把算术表达式写成中缀式,但对于机器来说更"习惯于"后 ...

  6. 读取SD卡中的图片

    Touxiang=(ImageView)view.findViewById(R.id.Touxiang); //头像Bitmap bm = BitmapFactory.decodeFile(" ...

  7. C++-教程3-VS2010C++各种后缀说明

    相关资料:"http://blog.csdn.net/kibaamor/article/details/18700607""http://blog.chinaunix.n ...

  8. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  9. 关于love2d教程的更新

    实在抱歉,每周工作六天,一天13小时以上,周日想休息一下,love2d的估计一个月一篇都很难做到了. 三个月后公司的项目应该做完了,那时应该有时间了. love2d估计快发布0.9了,改动应该不是很大 ...

  10. shell监控脚本,不考虑多用户情况

    #!/bin/bash CheckProcess() { if [ "$1" = "" ]; then fi PROCESS_NUM=`ps -ef | gre ...