当前位置: 首页 > news >正文

使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思

前言

本文给大家分享三个具有过渡效果的汉堡图标,当点击汉堡图标时,过渡为叉号图标。这种具有过渡特效的图标挺炫酷的,感觉一下子给网页增加一点新颖特色。早在2015年左右,国外挺多优秀门户网站都有使用类似的图标,那时不知道怎么实现,现在研究了一下,大概是使用了CSS伪类和动画的技巧来实现。

一、示例代码

(1)/src/views/Example/HamburgerIcon/index.vue

<template><div class="hamburger-icon"><div class="hamburger-icon-box"><div class="hamburger-1" :class="isActiveHamburger1 ? '' : 'is-active'" @click="isActiveHamburger1 = !isActiveHamburger1"><span class="line" /><span class="line" /><span class="line" /></div></div><div class="hamburger-icon-box"><div class="hamburger-2" :class="isActiveHamburger2 ? '' : 'is-active'" @click="isActiveHamburger2 = !isActiveHamburger2"><span class="line" /><span class="line" /><span class="line" /></div></div><div class="hamburger-icon-box"><div class="hamburger-3" :class="isActiveHamburger3 ? '' : 'is-active'" @click="isActiveHamburger3 = !isActiveHamburger3"><span class="line" /><span class="line" /><span class="line" /></div></div></div>
</template><script>
export default {data: () => ({isActiveHamburger1: true,isActiveHamburger2: true,isActiveHamburger3: true,}),methods: {// Todo }
}
</script><style lang="less" scoped>.hamburger-icon {display: flex;width: 100%;height: 100%;background-color: #2c3e50;.hamburger-icon-box {position: relative;flex: 1;display: table;margin: auto;}/* ---- ^ hamburger-1 ---- */.hamburger-1 {position: relative;width: 100px;margin: auto;&:hover {cursor: pointer;}.line {width: 40px;height: 5px;background-color: #ffffff;border-radius: 5px;display: block;margin: 7.5px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}&.is-active .line:nth-child(1) {-webkit-transform: translateY(12.5px) rotate(45deg);-ms-transform: translateY(12.5px) rotate(45deg);-o-transform: translateY(12.5px) rotate(45deg);transform: translateY(12.5px) rotate(45deg);}&.is-active .line:nth-child(2) {opacity: 0;}&.is-active .line:nth-child(3) {-webkit-transform: translateY(-12.5px) rotate(-45deg);-ms-transform: translateY(-12.5px) rotate(-45deg);-o-transform: translateY(-12.5px) rotate(-45deg);transform: translateY(-12.5px) rotate(-45deg);}}/* ---- / hamburger-1 ---- *//* ---- ^ hamburger-2 ---- */.hamburger-2 {position: relative;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;&:hover {cursor: pointer;}.line {width: 40px;height: 5px;background-color: #ffffff;border-radius: 5px;display: block;margin: 8px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}&:before {content: "";position: absolute;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 70px;height: 70px;border: 5px solid transparent;top: calc(50% - 35px);left: calc(50% - 35px);border-radius: 100%;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}&.is-active {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}&.is-active:before {border: 5px solid #ecf0f1;}&.is-active .line {width: 35px;}&.is-active .line:nth-child(1) {-webkit-transform: translateY(13px);-ms-transform: translateY(13px);-o-transform: translateY(13px);transform: translateY(13px);}&.is-active .line:nth-child(2) {opacity: 0;}&.is-active .line:nth-child(3) {-webkit-transform: translateY(-13px) rotate(90deg);-ms-transform: translateY(-13px) rotate(90deg);-o-transform: translateY(-13px) rotate(90deg);transform: translateY(-13px) rotate(90deg);}}/* ---- / hamburger-2 ---- *//* ---- ^ hamburger-3 ---- */.hamburger-3 {position: relative;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;&:hover {cursor: pointer;}.line {width: 40px;height: 5px;background-color: #ffffff;border-radius: 5px;display: block;margin: 8px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}&.is-active {animation: smallbig 0.6s forwards;}&.is-active .line:nth-child(1) {-webkit-transform: translateY(13px) rotate(45deg);-ms-transform: translateY(13px) rotate(45deg);-o-transform: translateY(13px) rotate(45deg);transform: translateY(13px) rotate(45deg);}&.is-active .line:nth-child(2) {opacity: 0;}&.is-active .line:nth-child(3) {-webkit-transform: translateY(-13px) rotate(-45deg);-ms-transform: translateY(-13px) rotate(-45deg);-o-transform: translateY(-13px) rotate(-45deg);transform: translateY(-13px) rotate(-45deg);}.hamburger-3.is-active .line:nth-child(1),.hamburger-3.is-active .line:nth-child(2),.hamburger-3.is-active .line:nth-child(3) {-webkit-transition-delay: 0.2s;-o-transition-delay: 0.2s;transition-delay: 0.2s;}@keyframes smallbig {0%, 100% {-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}50% {-webkit-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}}}/* ---- / hamburger-3 ---- */}
</style>

二、运行效果

相关文章:

使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思

前言 本文给大家分享三个具有过渡效果的汉堡图标&#xff0c;当点击汉堡图标时&#xff0c;过渡为叉号图标。这种具有过渡特效的图标挺炫酷的&#xff0c;感觉一下子给网页增加一点新颖特色。早在2015年左右&#xff0c;国外挺多优秀门户网站都有使用类似的图标&#xff0c;那…...

python面试题【题目+答案】

最近遇到了一份python的面试题&#xff0c;题目比较简单&#xff0c;时间控制在一个小时之内。以下是面试的题目跟答案&#xff0c;答案不代表最优解&#xff0c;只是当时所想到的一些思路&#xff0c;接下来将分享给大家。 目录 1. 给出下面打印结果 2.字典如何删除键、如何…...

Rocky(centos) jar 注册成服务,能开机自启动

概述 涉及&#xff1a;1&#xff09;sh 无法直接运行java命令&#xff0c;可以软连&#xff0c;此处是直接路径 2&#xff09;sh脚本报一堆空格换行错误&#xff1a;需将转成unix标准格式&#xff1b; #切换到上传的脚本路径 dos2unix 脚本文件名.sh 2&#xff09;SELINUX …...

科大讯飞-鸟类分类挑战赛-测试【1】

科大讯飞-鸟类分类挑战赛-测试【1】 1. 比赛说明2. EfficientNet测试2.1 **模型搭建:**2.2 **模型训练:**2.3 训练过程可视化2.4 一些报错解决:1. 比赛说明 背景: 随着生态环境的不断变化和人类对自然资源的过度开发,世界各地的鸟类数量和种类正在发生着巨大的变化。为了更…...

两行CSS让页面提升渲染性能

content-visibility是CSS新增的属性&#xff0c;主要用来提高页面渲染性能&#xff0c;它可以控制一个元素是否渲染其内容&#xff0c;并且允许浏览器跳过这些元素的布局与渲染。 content-visibility: hidden的效果与display: none类似其区别在于&#xff1a; content-visibi…...

UniApp中tabbar设置了position: fixed以及bottom:0后出现一条缝隙,看到了后面的内容

问题描述 解决方法 直接将bottom设置成-2px即可...

设计模式行为型——责任链模式

目录 什么是责任链模式 责任链模式的实现 责任链模式角色 责任链模式类图 责任链模式举例 责任链模式代码实现 责任链模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是责任链模式 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;又叫职…...

Xamarin.Android中Intent的使用

目录 1、说明2、使用方法2.1 常用方法2.2 调用系统应用 3、参考资料 1、说明 在Android开发中常常会用到Intent进行不同活动启动&#xff0c;整理资料如下 2、使用方法 2.1 常用方法 1、一般情况而言&#xff0c;都是使用如下的方式进行调用 Intent intent new Intent(th…...

matplotlib绘制方波圆周分解动画

1 方波的圆周分解 在学习傅里叶变换的时候&#xff0c;有一个经典的示例是方波的分解。我们知道&#xff0c;方波可以分解为无数个正弦波的叠加。而正弦波&#xff0c;又可以看作是圆周运动在一条直线上的投影。当时为了理解这个事情&#xff0c;恐怕大家也花了不少时间。 学…...

vue3+ts 实现枚举

首先 index.ts 中定义枚举 export const fruit [{key:1,name:苹果,},{key:11,name:草莓},{key:5,name:香蕉,},{key:51,name:葡萄,},{key:6,name:橙子},{key:7,name:哈密瓜},{key:10,name:西瓜}, ]; 接口返给的数据是一个对象 feeMap{ 1&#xff1a;200&#xff0c; 2&…...

【Python】5分钟了解11个最佳的Python编译器和解释器

11个最佳Python编译器和解释器 1. Brython2. Pyjs3. WinPython4. Skulpt5. Shed Skin6. Active Python7. Transcrypt8. Nutika9. Jython10. CPython11. IronPython结论原文链接 Python是一门初学者的编程语言。它是一种高级语言&#xff0c;非常灵活、解释性和面向对象的语言。…...

如何安装、部署、启动Jenkins

一、测试环境 Linux系统 Centos 7 二、安装步骤&#xff1a; 1、安装jdk 我安装的是jdk8&#xff0c;此处就不多说了&#xff0c;自己百度哈&#xff0c;很简单 2、安装jenkins 首先依次执行如下三个命令&#xff1a; 2.1、导入镜像&#xff1a; [rootcentos7 ~]# sudo …...

sqlalchemy flask长时间未使用 导致数据库连接失效

临时解决方案&#xff1a;在正式运行定时任务之前&#xff0c;先跑一个session.query()&#xff0c;相当于唤醒连接。 参考 https://blog.csdn.net/sinat_42483341/article/details/103723691...

Ubuntu 20.04 系统或图像界面卡死或完全无响应处理方法

Ubuntu 20.04 系统或图像界面卡死或完全无响应处理方法 问题背景无需重启方法安全重启方法 问题背景 Ubuntu 20.04在安装驱动程序时系统突然无响应&#xff0c;终端也无法运行&#xff1b;考虑到尽量不破坏系统&#xff0c;不希望强制上下电重启机器&#xff0c;以免损坏文件系…...

Linux编辑器 - vim使用

1.vim的基本概念 Vim是一个广泛使用的文本编辑器&#xff0c;它是在Unix和Linux系统中常用的命令行文本编辑器之一。 vim的主要三种模式 ( 其实有好多模式&#xff0c;目前掌握这 3 种即可 ), 分别是 命令模式 &#xff08; command mode &#xff09;、 插入模式 &#xff0…...

【Windows】磁盘快捷修复

【Windows】磁盘快捷修复 1、背景2、关于Chkdsk3、示例 1、背景 前段时间使用U盘拷贝文件过程中&#xff0c;突然发现U盘无法读取了&#xff0c;U盘里面存储的数据也无法获取。 然后使用windows系统的chkdsk命令进行修复。 chkdsk全称&#xff1a;checkdisk&#xff0c;即磁盘…...

Java 线程的多种状态

前言 在前文中详细介绍了线程的启动、中断、休眠、等待。本文详细介绍线程的多种状态。 获取线程的当前状态代码是&#xff1a; 线程对象.getState(); 目录 前言 一、NEW 二、RUNNABLE 三、BLOCKED 四、WAITNG 五、TIMED_WAITNG 六、TERMINATED 结语 一、NEW Thread 对…...

AI绘画| 迪士尼风格|可爱头像【附Midjourney提示词】

Midjourney案例分享 图片预览 迪士尼风格&#xff5c;可爱头像 高清原图及关键词Prompt已经放在文末网盘&#xff0c;需要的自取 在数字艺术的新时代&#xff0c;人工智能绘画已经迅速崭露头角。作为最先进的技术之一&#xff0c;AI绘画结合了艺术和科学&#xff0c;开启了一…...

【浪费了我两个小时时间】Microsoft store无法加载页面0x80131500

绕的圈&#xff0c;踩的坑 谷歌搜索&#xff0c; newbing搜索都叫我清理缓存&#xff0c;重新安装等方法。 还被这篇文章误导了一下&#xff1a;微软应用商店错误代码0x80072EFD怎么办&#xff1f;&#xff08;已解决&#xff09; 加上重启电脑各种试不行。 最后想到要去改代…...

【动态规划】子序列系列

文章目录 动态规划&#xff08;子序列系列&#xff09;1. 最长递增子序列2. 摆动序列3. 最长递增子序列的个数4. 最长数对链5. 最长定差子序列6. 最长的斐波那契子序列的长度7. 最长等差数列8. 等差数列划分 || - 子序列 动态规划&#xff08;子序列系列&#xff09; 1. 最长递…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

高保真组件库:开关

一:制作关状态 拖入一个矩形作为关闭的底色:44 x 22,填充灰色CCCCCC,圆角23,边框宽度0,文本为”关“,右对齐,边距2,2,6,2,文本颜色白色FFFFFF。 拖拽一个椭圆,尺寸18 x 18,边框为0。3. 全选转为动态面板状态1命名为”关“。 二:制作开状态 复制关状态并命名为”开…...

湖北理元理律师事务所:债务清偿方案中的法律技术革新

文/金融法律研究组 当前债务服务市场存在结构性矛盾&#xff1a;债权人追求快速回款&#xff0c;债务人需要喘息空间。湖北理元理律师事务所通过创新法律技术&#xff0c;在《企业破产法》《民法典》框架下构建梯度清偿模型&#xff0c;实现多方利益平衡。 一、个人债务优化的…...