<!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. js表单验证控制代码大全

    http://www.cnblogs.com/SAL2928/archive/2008/10/24/1319020.html目录: 1:js 字符串长度限制.判断字符长度.js限制输入.限制不能输入. ...

  2. Idea 翻译插件

    https://github.com/YiiGuxing/TranslationPlugin

  3. C#: 数字经纬度和度分秒经纬度间的转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  4. Pku3673

    <span style="color:#6600cc;">/* B - Cow Multiplication Time Limit:1000MS Memory Limi ...

  5. OGG目的端的checkpoint table被drop的修复方法

    OGG目的端的checkpoint table被drop的修复方法 參考自:OGG Replicat Failed Due To Check_point Table beingTruncated (文 ...

  6. atitit.orm的缺点与orm框架市场占有率，选型attilax总结

    atitit.orm的缺点与orm框架市场占有率,选型attilax总结 1. attilax的orm框架要求 1 2. orm框架市场占有率 2 3. spring jdbc templt 3 4. ...

  7. Cocoa、Foundation、UIKit、Objective-c、XCode、Interface Builder的概念

    转自:http://blog.csdn.net/hou_cocoa/article/details/6187418 Cocoa 是在Mac OS X系统上原生的一个编译环境.他包含两个框架,其实就是一 ...

  8. Java GC 日志解析

    JVM 在Java应用程序优化中是不可缺少的一大重项,如何合理配置Java参数,如果验证配置参数的有效性,从GC日志中可以获得很重要的提示,以下是笔者对GC垃圾收集器默认开启的组合日志的部分的解析,希 ...

  9. kernel 4.4.12 移植 HUAWEI MU609 Mini PCIe Module

    首先请参考 http://www.cnblogs.com/chenfulin5/p/6951290.html 上一章刚讲了 kernel 3.2.0 移植 MU609 这一章记录新版kernel 的移 ...

  10. PHP——内测：新闻管理练习题及答案（自己做的）

    试题看文件:1.28练习内测:新闻管理.pdf 数据库为newssystem 表为news 表内容为 fabuxinwen.php <!DOCTYPE html PUBLIC "-// ...