=》

css:

.cateBtn{
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  width: 30px;
  height: 30px;
  display: inline-block;
}
.cateLine,.cateLine::after,.cateLine::before{
  position: absolute;
  width: 20px;
  height: 2px;
  background: red;
  transition: all .3s linear 0s;
}
.cateLine{
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.cateLine::after{
  content: "";
  bottom: 6px;
  left: 0px;
}
.cateLine::before{
  content: "";
  top: 6px;
  left: 0px;
}
 
.open .cateLine{
  background: rgba(0,0,0,0);
}
.open .cateLine::after{
  bottom: 0px;
  transform: rotate(135deg);
}
.open .cateLine::before{
  top: 0px;
  transform: rotate(45deg);
}
html:
<a class="cateBtn">
  <span class="cateLine">
  </span>
</a>
js:
$(".cateBtn").on("click",function(){
  $(this).toggleClass("open");
})

transition-分栏按钮动画的更多相关文章

  1. [Swift通天遁地]八、媒体与动画-(14)使用TextKit快速实现文章的分栏效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. IOS开发之XCode学习013:步进器和分栏控件

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能:  1.定义UIStepper和UISegmente ...

  3. WPF中利用后台代码实现窗口分栏动态改变

    在WPF中实现窗口分栏并能够通过鼠标改变大小已经非常容易,例如将一个GRID分成竖排三栏显示,就可以将GRID先分成5列,其中两个固定列放GridSplitter. <Grid Backgrou ...

  4. Jquery moblie中的分栏布局

    大家好,很高兴又与大家见面了,今天我要给大家展示的是自己对jquery  moblie中网格布局的理解.可能不是尽善尽美,希望大家多多体谅! 在jquery moblie中有两种布局,一种是表格布局( ...

  5. iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换

    iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换 不多说直接上效果图和代码 1.设置RootViewController为一个导航试图控制器 //  Copyright © 2016年 ...

  6. uwp - 做一个相对炫酷的动画按钮/按钮动画

    原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...

  7. Unity中的动画系统和Timeline(2) 按钮动画和2D精灵动画

    按钮动画 1 创建按钮后,按钮的Button组件中,Transition我们平时用的时Tint,这次选择Animation 选择Auto Generate Animation,创建一个按钮动画 2 后 ...

  8. CSS3-column分栏

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. ActiveReports 报表应用教程 (4)---分栏报表

    在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...

随机推荐

  1. 【Nginx】进程模型

    转自:网易博客 服务器的并发模型设计是网络编程中很关键的一个部分,服务器的并发量取决于两个因素,一个是提供服务的进程数量,另外一个是每个进程可同时处理的并发连接数量.相应的,服务器的并发模型也由两个部 ...

  2. 3.1-HDLC/PPP

    同步串行链路(Serail Point-to-Point Link)的封装 3.1-HDLC/PPP     高级数据链路控制HDLC(High-Level Data Link Control):   ...

  3. HDFS学习笔记(2)hdfs_shell &amp; JavaAPI

    FileSystem shell指令 官方文档: HDFS Commands Reference appendToFile cat checksum chgrp chmod chown copyFro ...

  4. JPA学习笔记(13)——查询缓存

    使用hibernate的查询缓存 运行下面代码: String jpql = "FROM User u WHERE u.id = ?"; Query query = entityM ...

  5. 【转载】java学习线路

    http://www.cnblogs.com/Leo_wl/p/5437059.html java基础(java编程思想) =>web开发(html/css/js  servlet/jsp 数据 ...

  6. js对象和json的区别

    他们两个没有什么关联只不过可以相互转换而已,就像json可以转化为java对象一样 注意:json只有字符串形式(就是我们常说的json字符串:key/value值和数组形式的字符串),没有什么jso ...

  7. 解决无线网卡 RTL8723BE ubuntu环境下不稳定情况

    jiqing@ThinkPad:~$ lspci | grep -i net 00:19.0 Ethernet controller: Intel Corporation Ethernet Conne ...

  8. 全面解析布局(Grid & Canvas &StackPanel &Wrappanel) 转

    写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高.拿grid和canvas来讲,这两个布局容器还是有许多小细节值得讲的,如果你不了解的话,开发中经常会遇到一些让人匪夷 ...

  9. 【Poj1325】Machine Schedule机器调度

    目录 List Description Input Output Sample Input Sample Output HINT Solution Code Position: http://poj. ...

  10. qtree4

    https://zybuluo.com/ysner/note/1236834 题面 给出一棵边带权的节点数量为\(n\)的树,初始树上所有节点都是白色.有两种操作: 改变节点\(x\)的颜色,即白变黑 ...