当前位置: 首页 > 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>

二、运行效果

http://www.lryc.cn/news/105993.html

相关文章:

  • python面试题【题目+答案】
  • Rocky(centos) jar 注册成服务,能开机自启动
  • 科大讯飞-鸟类分类挑战赛-测试【1】
  • 两行CSS让页面提升渲染性能
  • UniApp中tabbar设置了position: fixed以及bottom:0后出现一条缝隙,看到了后面的内容
  • 设计模式行为型——责任链模式
  • Xamarin.Android中Intent的使用
  • matplotlib绘制方波圆周分解动画
  • vue3+ts 实现枚举
  • 【Python】5分钟了解11个最佳的Python编译器和解释器
  • 如何安装、部署、启动Jenkins
  • sqlalchemy flask长时间未使用 导致数据库连接失效
  • Ubuntu 20.04 系统或图像界面卡死或完全无响应处理方法
  • Linux编辑器 - vim使用
  • 【Windows】磁盘快捷修复
  • Java 线程的多种状态
  • AI绘画| 迪士尼风格|可爱头像【附Midjourney提示词】
  • 【浪费了我两个小时时间】Microsoft store无法加载页面0x80131500
  • 【动态规划】子序列系列
  • URL存储解锁数据管理的新思路,重新定义数据传输与共享(@vue/repl)
  • matlab程序中文乱码
  • 【计算机视觉|语音分离】期望在嘈杂环境中聆听:一个用于语音分离的不依赖于讲话者的“音频-视觉模型”
  • curl 介绍和使用
  • 5、VMWARE安装、MobaXterm SSH连接 、Ubuntu xrdp安装使用
  • Docker dockerfile 案例:centos 支持 vim
  • Git忽略已经提交过一次的文件 Git忽略文件
  • Scala项目找不到或无法加载主类
  • 八大排序算法--选择排序(动图理解)
  • 6.s081(Fall 2022)Lab2: system calls
  • SAMBA 文件分享相关 笔记