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