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

news2024/11/9 9:20:55

本文给大家分享三个具有过渡效果的汉堡图标,当点击汉堡图标时,过渡为叉号图标。这种具有过渡特效的图标挺炫酷的,感觉一下子给网页增加一点新颖特色。早在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>

二、运行效果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/819073.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql之binlog日志浅析

一、binlog日志简介 Binlog是MySQL数据库中的二进制日志&#xff0c;用于记录数据库中所有修改操作&#xff0c;包括增删改等操作。binlog以二进制格式保存&#xff0c;可以通过解析binlog文件来查看数据库的操作历史记录。binlog日志可以用于数据恢复、数据备份、数据同步等场…

智慧水务和物联网智能水表在农村供水工程中的应用

摘 要&#xff1a;随着社会的进步和各项事业的飞速发展&#xff0c;人民生活水平的逐步提升&#xff0c;国家对农村饮水安全有了更高的要求&#xff0c;为了进一步提升农村供水服务的质量&#xff0c;利用现代化、信息化科学技术提升农村供水服务质量&#xff0c;提高用水管理效…

对象分割技术在图像重绘上的运用

今年早些时候&#xff0c;Meta AI 发布了他们的新开源项目: Segment Anything Model&#xff08;SAM) &#xff0c;在计算机视觉社区引起了巨大的轰动。SAM 是一种快速分割系统&#xff0c;它擅长于对不熟悉的物体和图像进行零样本泛化&#xff0c;而不需要额外的训练。 在本教…

安全测试国家标准解读——函数调用安全、异常处理安全、指针安全

下面的系列文章主要围绕《GB/T 38674—2020 信息安全技术 应用软件安全编程指南》进行讲解&#xff0c;该标准是2020年4月28日&#xff0c;由国家市场监督管理总局、国家标准化管理委员会发布&#xff0c;2020年11月01日开始实施。我们对该标准中一些常见的漏洞进行了梳理&…

DCDC下垂控制算法

在并联的DC/DC转换器系统中&#xff0c;下垂控制&#xff08;Droop Control&#xff09;是一种常见的方法&#xff0c;用以实现在不同模块之间的功率均衡。在下垂控制策略中&#xff0c;每一个转换器的输出电压会随着负载的增加而减小&#xff0c;这样能够保证所有的转换器都在…

CSS font-family 等宽字体

CSS font-family 等宽字体 font-family: "Lucida Console", Consolas, "Courier New", Courier, monospace; font-family: Courier New, Courier, Lucida Console, Consolas, monospace; font-family: Courier, Lucida Console, Consolas, Courier New,…

【数学建模】2023 深圳杯 东三省 数学建模 B题 :电子资源版权保护问题 (基于DCT的暗水印信息嵌入模型)

在文章末尾的公众号回复&#xff1a;深圳杯B题&#xff0c;获取完整内容。 本文的文本、公式、代码都是部分展示。 文章目录 一、题目二、思路 与 解答2.1 问题一2.11 LSB 方法测试2.12 LSB 方法建模 2.2 问题二2.3 问题三2.31 方法与步骤概述2.32 基于DCT的暗水印信息嵌入模型…

第八章 HL7 架构和可用工具 - 测试转换

文章目录 第八章 HL7 架构和可用工具 - 测试转换显示段地址显示字段地址批量消息 测试转换 第八章 HL7 架构和可用工具 - 测试转换 显示段地址 要显示段地址&#xff0c;请将光标悬停在阴影列中的段名称上。工具提示显示以下内容&#xff1a; 在虚拟属性路径中使用的段地址该…

CSS样式中颜色与颜色值的应用

使用CSS描绘页面样式时&#xff0c;颜色是其中不可或缺的&#xff0c;无论是对文本、背景还是边框、阴影&#xff0c;我们都写过无数代码用来增添颜色。而为了让网页的色彩表现更出色&#xff0c;我们很有必要完整梳理下CSS中的色彩。 要讲清楚CSS中的颜色&#xff0c;离不开颜…

windows下tomcat无故宕机,检测http或https服务,并自动重启Tomcat服务

一、问题描述及解决原理 把项目发布到windows服务器中&#xff0c;如tomcat工程不稳定&#xff0c;会有无故宕机的问题。如果通过程序无法解决&#xff0c;并且重启tomcat服务能够生效的话&#xff0c;可以做一个自动检测并重启的脚本。 脚本通过检测tomcat对应的工程链接&…

flink1.17.0 jdk11服务的可以启动,web端无法访问

在配置文件中增加如下配置&#xff1a; 当前linux的ip地址&#xff0c;[localhsot&#xff0c;0.0.0.0]无效 rest.bind-address: 192.168.1.21

机器学习十大经典算法

机器学习算法是计算机科学和人工智能领域的关键组成部分&#xff0c;它们用于从数据中学习模式并作出预测或做出决策。本文将为大家介绍十大经典机器学习算法&#xff0c;其中包括了线性回归、逻辑回归、支持向量机、朴素贝叶斯、决策树等算法&#xff0c;每种算法都在特定的领…

使用 Docker Compose 部署单机版 Redis:简单高效的数据缓存与存储

家人们啦&#xff01;今天我们来介绍如何使用 docker-compose 部署单机版 Redis&#xff0c;这是一个简单高效的数据缓存与存储解决方案&#xff0c;广泛应用于Web应用、移动应用以及各类数据处理场景。我们过后几篇文章了将会介绍cluster和sentinel集群的部署。通过本文的指导…

使用css和js给按钮添加微交互的几种方式

使用css和js给按钮添加微交互的几种方式 在现实世界中&#xff0c;当我们轻弹或按下某些东西时&#xff0c;它们会发出咔嗒声&#xff0c;例如电灯开关。有些东西会亮起或发出蜂鸣声&#xff0c;这些响应都是“微交互”&#xff0c;让我们知道我们何时成功完成了某件事。在本文…

切片[::-1]解析列表list表示的“非负整数加1”

列表数位表示非负整数&#xff0c;熟练操作“满十进位”。 (本笔记适合熟练操作Python列表list的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅…

一文搞定Java NIO,以及ZipInputStream、ByteArrayInputStream各种奇葩流

目录 一、Channel1、FileChannel代码示例2、DatagramChannel代码示例3、SocketChannel 和 ServerSocketChannel代码示例 二、Buffer1、ByteBuffer示例代码2、CharBuffer示例代码3、ShortBuffer、IntBuffer、LongBuffer、FloatBuffer、DoubleBuffer 等示例代码 三、Selector1、S…

MTK system_server 卡死导致手机重启案例分析

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、MTK AEE Log分析工具二、AEE Log分析流程三、system_server 卡死案例分析及解决 本文主要针对 Exception Type: system_server_watchdog , system_…

激光雷达供不应求?产能过剩、毛利下滑、定点兑付风险凸显

激光雷达&#xff0c;已经供不应求&#xff1f; 以小鹏最新上市的G6车型为例&#xff0c;目前该车的Max版本在官网下订的交付时间为12周&#xff0c;原因之一就是激光雷达等核心零部件交付吃紧。 截图来自网络&#xff08;晚点Auto公众号&#xff09; 那么事实是否如此&#xf…

【Vue2.x源码系列05】异步更新及nextTick原理

vue 官网中是这样描述 nextTick 的 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;可以获取更新后的 DOM。 在学习 nextTick 是如何实现之前&#xff0c;我们要先了解下 JavaScript 的执行机制 JavaScript 执行机制 浏览器是多线程的&…

Kindling the Darkness: A Practical Low-light Image Enhancer论文阅读笔记

这是ACMMM2019的一篇有监督暗图增强的论文&#xff0c;KinD其网络结构如下图所示&#xff1a; 首先是一个分解网络分解出R和L分量&#xff0c;然后有Restoration-Net和Adjustment-Net分别去对R分量和L分量进一步处理&#xff0c;最终将处理好的R分量和L分量融合回去。这倒是很常…