CSS实现动画效果的菜单收起展开图标，html实现动画效果的箭头
效果
实现代码
此处JS代码引入了jquery
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.menu-icon{position: absolute;left: 20%;top: 30%;transition: all .3s;}.menu-icon:before, .menu-icon:after {position: absolute;width: 10px;height: 2px;background-color: currentcolor;border-radius: 2px;transition: background .3s cubic-bezier(.645,.045,.355,1),transform .3s cubic-bezier(.645,.045,.355,1),top .3s cubic-bezier(.645,.045,.355,1),color .3s cubic-bezier(.645,.045,.355,1);content: "";}.menu-icon:before{transform: rotate(-45deg) translate(4.5px); }.menu-icon:after{transform: rotate(45deg) translate(-4.5px); }.menu-icon-1:before{transform: rotate(45deg) translate(4.5px); }.menu-icon-2:after{transform: rotate(-45deg) translate(-4.5px); }</style></head><body><div class="menu-icon" lay-id="1" onclick="showHiden()"></div></body><script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script><script>function showHiden(){var layId = $(".menu-icon").attr("lay-id");if(layId == 1){$(".menu-icon").addClass("menu-icon-1");$(".menu-icon").addClass("menu-icon-2");$(".menu-icon").attr("lay-id", 2);}else{$(".menu-icon").removeClass("menu-icon-1");$(".menu-icon").removeClass("menu-icon-2");$(".menu-icon").attr("lay-id", 1);}}</script>
</html>相关文章：
CSS实现动画效果的菜单收起展开图标，html实现动画效果的箭头
效果 实现代码 此处JS代码引入了jquery <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>.menu-icon{position: absolute;left: 20%;top: 30%;transition: all .3s;}.menu-icon:before, .menu…...
大数据平台小结
搭建大数据平台启动流程1、启动Nginx服务（在bdp-web-mysql服务中）cd /usr/local/nginx/# 启动Nginx ./sbin/nginx# 查看端口是否存在 netstat -tunlp|grep 200012、启动zookeeper（在bdp-executor-realtime123）cd /app/bdp/apache-…...
力扣-139单词拆分
力扣-139单词拆分 1、题目 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意：不要求字典中出现的单词全部都使用，并且字典中的单词可以重复使用。 示例 1： 输入: s "…...
图机器学习-图神经网络
图神经网络 前面讲了图机器学习的一些传统方法，现在正式进入到课程的核心部分：图神经网络。 Design of GNN 那么图神经网络和我们之前接触的一些深度神经网络有什么不同呢？ 对于别的类型的神经网络，往往我们都是处理一些类似网…...
配置Airbyte资源限制
资源限制有三种不同的级别配置：Instance-wide - 应用到Airbyte实例创建的Sync Job的所有容器上。Connector-specific - 应用到Airbyte实例创建的Sync Job的所有指定类型连接器的容器上Connection-specific - 应用到Airbyte实例创建的Sync Job的所有指定管道的容器上…...
python实现PCA降维画分类散点图并标出95%的置信区间
此代码以数据集鸢尾花为例，对其使用PCA降维后，绘制了三个类别的样本点和对应的置信圆（即椭圆）。先放效果图。 下面是完整代码： from matplotlib.patches import Ellipsedef plot_point_cov(points, nstd3, axNone, **…...
Mysql高级之索引结构详解
Mysql的索引详解1.索引定义2.索引结构2.1数据结构分析2.1.1熟知的数据结构2.1.2分析为什么这么多的数据结构不全适用于索引结构2.2Hash结构2.3B tree结构3.索引分类3.1聚集索引（聚簇索引）3.2非聚集索引（稀疏索引）3.3联合索引3.4主…...
【线程-J.U.C】
Lock J.U.C最核心组件，Lock接口出现之前，多线程的并发安全只能由synchronized处理，但java5之后，Lock的出现可以解决synchronized的短板，更加灵活。 Lock本质上是一个接口，定义了释放锁（unlock&…...
docker布署spring boot jar包项目
目录docker 安装创建目录制作镜像启动容器查看日志docker 安装 Docker安装、详解与部署 创建目录 服务器中创建一个目录，存放项目jar包和Dockerfile 文件 mkdir /目录位置创建目录后创建Dockerfile文件，上传jar包到同一目录下 创建dockerfile vim Doc…...
极简Vue3教程--Pinia状态管理
Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近pia（西班牙语中的菠萝）的词；Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API&#x…...
常用的map转bean互转方法
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 常用的map转bean互转方法一、hutool工具类二、fastjson工具类三、beanutils_BeanUtils工具类 不太好用四、cglib BeanMap工具类 不太好用五、reflect 反射来玩 不太好玩六、I…...
2.4G收发一体芯片NRF24L01P跟国产软硬件兼容 SI24R1对比
超低功耗高性能 2.4GHz GFSK 无线收发器芯片Si24R1，软硬件兼容NRF24L01P. Si24R1 是一颗工作在 2.4GHz ISM 频段，专为低功耗无线场合设计，集成嵌入式ARQ 基带协议引擎的无线收发器芯片。工作频率范围为 2400MHz-2525MHz，共有 126个…...
设计模式之七大原则（一）——单一职责原则、开放-关闭原则
目录一、设计模式的目的二、设计模式的七大原则1.单一职责原则2.开放-关闭原则一、设计模式的目的 设计模式的目的是为了提高代码重用性、可读性、可扩展性、可靠性，使得程序呈现出高内聚、低耦合的特性。 代码重用性（相同功能的代码，不用多…...
C++ set、unordered_set、multiset它们之间的区别与一些使用方法（不断更新）
set、unordered_set、multiset是什么？以及它们之间的区别 首先，它们三个都是C标准库提供的关联容器中的一种。只不过set、multiset容器是有序的，而unordered_set容器是无序的 std::set 是 C 标准库中的一个容器，其存储的元素按设…...
hadoop调优
hadoop调优 1 HDFS核心参数 1.1 NameNode内存生产配置 1.1.1 NameNode内存计算 每个文件块大概占用150byte，如果一台服务器128G，能存储的文件块如下 128 (G)* 1024(MB) * 1024(KB) * 1024(Byte) / 150 Byte 9.1 亿 1.1.2 Hadoop2.x 在Hadoop2.x中…...
EM@三角函数诱导公式
文章目录诱导公式单位圆坐标和三角函数记忆口诀符号看象限奇变偶不变例常用诱导公式🎈常用部分(5对)倒数关系六种三角函数间的转换关系小结ReflectionsShifts and periodicity诱导公式 诱导公式 - 维基百科，自由的百科全书 (wikipedia.org) 单位圆坐标…...
是不是只能学IT互联网技术才有发展前途？
当然不是，三百六十行，行行出状元。 但我们需要认清一个现实是，我们正处于一个信息爆炸的时代，掌握紧跟潮流的技术，才可以让我们更自信地面对每天的生活，才有多余的精力、财力来享受生活。“人生在世&#…...
Linux 进程：exit和_exit的辨析
目录1.接口与函数2.缓冲区3.exit 与 _exit(1)_exit(2)exit这里来认识exit函数和 _exit接口 ，它们的作用是类似的，都是在调用后退出程序，可以在程序的任何地方调用。 1.接口与函数 exit函数和_exit接口，一个函数，一个…...
智能电子标签——商超版价签
2.1英寸TFT黑白电子价签 ★ 快速变价，高效运营 ★ 市场实用，布局物联网未来 ★ 更好客户体验 ★ 降低系统成本，具备竞争力 ★ 2.1英寸黑白红电子价签 ★ 电池低能耗，常规使用三年 ★ 穿透力强不慣障碍 ★ 2.4G载波&#x…...
计算机网络自检
1 计网体系结构 因特网结构： 计网三个组成成分： 工作方式-其中2个部分： 功能-两个子网： 5个XAN分别是： 传输技术，两者的主要区别： 4种基本网络拓扑结构： 3种交换技术： 协…...
DC真实数据都有哪些？Filecoin为DC数据存储的解决方案又是什么？
对于生活在数字时代的我们而言，数据或许就和平日呼吸的空气一样，已经不需要我们再去思考其概念。我们的日常生活中无时无刻都有数据的身影，日常的购物消费、出行、学习、记录，当我们每天生活有数字化加持的小区里，工作…...
解决vscode无法自动更新
一．前言 要在ｖｓｃｏｄｅ里面安装插件，被提示版本不匹配，然后得更新，然后我发现我的＇帮助＇菜单栏下没有检查更新，然后我去&…...
315线上知识竞赛答题活动方案及模板分享
315线上知识竞赛答题活动方案及模板分享在315国际消费者权益日来临之际， 很多单位推出有奖知识竞答， 希望大家在了解专业知识的同时， 还可以拿到自己喜欢的奖品！这是消费者委员会和监管局联合举办的“315消费知识在线有奖竞答”活…...
论文复现-2：代码部分
以CONLL03数据集为例 文章目录1 整体框架2 数据结构2.1 原始数据集2.2 处理之后的数据集3 代码部分3.0 模型参数3.1 数据预处理3.2 模型方法3.1.1 定义表示的学习权重项的学习双塔模型3.2.2 forward3.3 损失函数3.4 训练与推理Ablation study训练实例1 整体框架 任务是实体识别…...
Linux开放的端口太多了？教你一招找出所有开放的端口，然后直接干掉！
基于服务器安全性维护的目的，查看所有开放的端口是通常采取的第一步，从中检查出可疑或者不必要的端口并将其关掉。关于查看开放的端口，方法不止一种，比如lsof 命令，还可以使用 ss 命令。 查看开放的端口 今天我们就介…...
mysql集群简介
集群的好处 高可用性：故障检测及迁移，多节点备份。 可伸缩性：新增数据库节点便利，方便扩容。 负载均衡：切换某服务访问某节点，分摊单个节点的数据库压力。 集群要考虑的风险 网络分裂：群集还…...
装饰器模式
概述 当我们编写软件时，有时我们会遇到需要在不修改现有代码的情况下添加新功能的情况。这时，我们可以使用装饰器模式。 装饰器模式是一种结构性设计模式，它允许我们在不改变对象接口的情况下动态地向对象添加功能。装饰器模式通过创建一个…...
21 Nacos客户端本地缓存及故障转移
Nacos客户端本地缓存及故障转移 在Nacos本地缓存的时候有的时候必然会出现一些故障，这些故障就需要进行处理，涉及到的核心类为ServiceInfoHolder和FailoverReactor。 本地缓存有两方面，第一方面是从注册中心获得实例信息会缓存在内存当中&a…...
遍历读取文件夹下的所有文件
遍历读取文件夹下的所有文件 例如，读取文件夹下，子文件夹的所有的jpg文件： import glob path "./database/20230302/night/*/*.jpg"#设置自己的文件夹路径以及文件 image_files glob.glob(path, recursiveTrue)for image_file …...
nexus安装与入门
安装 nexus-3.31.1-01-unix.tar.gz 链接：https://pan.baidu.com/s/1YrJMwpGxmu8N2d7XMl6fSg 提取码：kfeh 上传到服务器，解压 tar -zvxf nexus-3.31.1-01-unix.tar.gz进入bin目录，启动 ./nexus start查看状态 ./nexus status默…...
深圳出国劳务公司官网/键词优化排名
大二学年学生自我鉴定范文700字大二学习生活的结束，我的大学生活已经进行了一半，回忆过往的点点滴滴，都是人生最大的财富。想起我大一的自我鉴定似乎还在眼前，但时间总是很快，现在我又将我的大二自我鉴定做一个好好的总…...
wordpress 多语言版本/推广运营怎么做
1、 1、 在加载控件的地方插入一个PlaceHolder：加载代码： WEbControl wc new WebControl(HtmlTextWriterTag.Textarea); PlaceHolder1.Controls.Add(wc); 这样就可以在PlaceHolder处插入一个Textarea 2、自定义显示用户控件 在从一个Web页面…...
建设电商网站/高端企业建站公司
linux shell命令下我们可以通过相关命令关闭和重启计算机，下面由学习啦小编为大家搜集整理了linux shell的关机命令是什么的相关知识，希望对大家有帮助!linux shell的关机命令问题描述对于Linux系统而言，许多时候是用于服务器之类的ÿ…...
视频上传网站如何做/谷歌商店paypal下载官网
切换到第一个文本终端。在Linux下你可以有多达六个不同的终端。这个命令的意思是：“同时按住键和键，然后按键，再释放所有的键”。(n1..6)切换到第n个文本终端。(你也可以使用不是很经常用到的命令chvt n来实现，n指的是第n个文本终…...
一个网站做数据维护3天正常吗/企业网站怎么优化
4.1 实战：在域环境安装和配置企业CA 本节目标： 安装企业CA 为域中的计算机安装pop3和SMTP服务 在域中创建用户zhang 电子邮箱地址为zhangess.com 在域中创建用户wang电子邮箱地址为wangess.com 掌握批量设置域用户电子邮件地址 掌握域用户申请证书…...
上海青浦区网站建设公司/谷歌下载
random库是使用随机数的python标准库。 伪随机数：采用梅森旋转算法生产的伪随机数列中元素 random库主要用于生成随机数基本随机数函数 随机数种子相同的种子生成的随机数是相同的，可以复现结果。 扩展随机数函数例 圆周率的计算 蒙特卡洛方法from rando…...