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

前言

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

一、示例代码

（1）/src/views/Example/HamburgerIcon/index.vue

1.  
   <template>
2.  
   <div class="hamburger-icon">
3.  
   <div class="hamburger-icon-box">
4.  
   <div class="hamburger-1" :class="isActiveHamburger1 ? '' : 'is-active'" @click="isActiveHamburger1 = !isActiveHamburger1">
5.  
   <span class="line" />
6.  
   <span class="line" />
7.  
   <span class="line" />
8.  
   </div>
9.  
   </div>
10.  
     
11.  
    <div class="hamburger-icon-box">
12.  
    <div class="hamburger-2" :class="isActiveHamburger2 ? '' : 'is-active'" @click="isActiveHamburger2 = !isActiveHamburger2">
13.  
    <span class="line" />
14.  
    <span class="line" />
15.  
    <span class="line" />
16.  
    </div>
17.  
    </div>
18.  
     
19.  
    <div class="hamburger-icon-box">
20.  
    <div class="hamburger-3" :class="isActiveHamburger3 ? '' : 'is-active'" @click="isActiveHamburger3 = !isActiveHamburger3">
21.  
    <span class="line" />
22.  
    <span class="line" />
23.  
    <span class="line" />
24.  
    </div>
25.  
    </div>
26.  
    </div>
27.  
    </template>
28.  
     
29.  
    <script>
30.  
    export default {
31.  
    data: () => ({
32.  
    isActiveHamburger1: true,
33.  
    isActiveHamburger2: true,
34.  
    isActiveHamburger3: true,
35.  
    }),
36.  
    methods: {
37.  
    // Todo
38.  
    }
39.  
    }
40.  
    </script>
41.  
     
42.  
    <style lang="less" scoped>
43.  
    .hamburger-icon {
44.  
    display: flex;
45.  
    width: 100%;
46.  
    height: 100%;
47.  
    background-color: #2c3e50;
48.  
     
49.  
    .hamburger-icon-box {
50.  
    position: relative;
51.  
    flex: 1;
52.  
    display: table;
53.  
    margin: auto;
54.  
    }
55.  
     
56.  
    /* ---- ^ hamburger-1 ---- */
57.  
    .hamburger-1 {
58.  
    position: relative;
59.  
    width: 100px;
60.  
    margin: auto;
61.  
     
62.  
    &:hover {
63.  
    cursor: pointer;
64.  
    }
65.  
     
66.  
    .line {
67.  
    width: 40px;
68.  
    height: 5px;
69.  
    background-color: #ffffff;
70.  
    border-radius: 5px;
71.  
    display: block;
72.  
    margin: 7.5px auto;
73.  
    -webkit-transition: all 0.3s ease-in-out;
74.  
    -o-transition: all 0.3s ease-in-out;
75.  
    transition: all 0.3s ease-in-out;
76.  
    }
77.  
     
78.  
    &.is-active .line:nth-child(1) {
79.  
    -webkit-transform: translateY(12.5px) rotate(45deg);
80.  
    -ms-transform: translateY(12.5px) rotate(45deg);
81.  
    -o-transform: translateY(12.5px) rotate(45deg);
82.  
    transform: translateY(12.5px) rotate(45deg);
83.  
    }
84.  
     
85.  
    &.is-active .line:nth-child(2) {
86.  
    opacity: 0;
87.  
    }
88.  
     
89.  
    &.is-active .line:nth-child(3) {
90.  
    -webkit-transform: translateY(-12.5px) rotate(-45deg);
91.  
    -ms-transform: translateY(-12.5px) rotate(-45deg);
92.  
    -o-transform: translateY(-12.5px) rotate(-45deg);
93.  
    transform: translateY(-12.5px) rotate(-45deg);
94.  
    }
95.  
    }
96.  
    /* ---- / hamburger-1 ---- */
97.  
     
98.  
    /* ---- ^ hamburger-2 ---- */
99.  
    .hamburger-2 {
100.  
     position: relative;
101.  
     -webkit-transition: all 0.3s ease-in-out;
102.  
     -o-transition: all 0.3s ease-in-out;
103.  
     transition: all 0.3s ease-in-out;
104.  
      
105.  
     &:hover {
106.  
     cursor: pointer;
107.  
     }
108.  
      
109.  
     .line {
110.  
     width: 40px;
111.  
     height: 5px;
112.  
     background-color: #ffffff;
113.  
     border-radius: 5px;
114.  
     display: block;
115.  
     margin: 8px auto;
116.  
     -webkit-transition: all 0.3s ease-in-out;
117.  
     -o-transition: all 0.3s ease-in-out;
118.  
     transition: all 0.3s ease-in-out;
119.  
     }
120.  
      
121.  
     &:before {
122.  
     content: "";
123.  
     position: absolute;
124.  
     -webkit-box-sizing: border-box;
125.  
     -moz-box-sizing: border-box;
126.  
     box-sizing: border-box;
127.  
     width: 70px;
128.  
     height: 70px;
129.  
     border: 5px solid transparent;
130.  
     top: calc(50% - 35px);
131.  
     left: calc(50% - 35px);
132.  
     border-radius: 100%;
133.  
     -webkit-transition: all 0.3s ease-in-out;
134.  
     -o-transition: all 0.3s ease-in-out;
135.  
     transition: all 0.3s ease-in-out;
136.  
     }
137.  
      
138.  
     &.is-active {
139.  
     -webkit-transform: rotate(45deg);
140.  
     -ms-transform: rotate(45deg);
141.  
     -o-transform: rotate(45deg);
142.  
     transform: rotate(45deg);
143.  
     }
144.  
      
145.  
     &.is-active:before {
146.  
     border: 5px solid #ecf0f1;
147.  
     }
148.  
      
149.  
     &.is-active .line {
150.  
     width: 35px;
151.  
     }
152.  
      
153.  
     &.is-active .line:nth-child(1) {
154.  
     -webkit-transform: translateY(13px);
155.  
     -ms-transform: translateY(13px);
156.  
     -o-transform: translateY(13px);
157.  
     transform: translateY(13px);
158.  
     }
159.  
      
160.  
     &.is-active .line:nth-child(2) {
161.  
     opacity: 0;
162.  
     }
163.  
      
164.  
     &.is-active .line:nth-child(3) {
165.  
     -webkit-transform: translateY(-13px) rotate(90deg);
166.  
     -ms-transform: translateY(-13px) rotate(90deg);
167.  
     -o-transform: translateY(-13px) rotate(90deg);
168.  
     transform: translateY(-13px) rotate(90deg);
169.  
     }
170.  
     }
171.  
     /* ---- / hamburger-2 ---- */
172.  
      
173.  
     /* ---- ^ hamburger-3 ---- */
174.  
     .hamburger-3 {
175.  
     position: relative;
176.  
     -webkit-transition: all 0.3s ease-in-out;
177.  
     -o-transition: all 0.3s ease-in-out;
178.  
     transition: all 0.3s ease-in-out;
179.  
      
180.  
     &:hover {
181.  
     cursor: pointer;
182.  
     }
183.  
      
184.  
     .line {
185.  
     width: 40px;
186.  
     height: 5px;
187.  
     background-color: #ffffff;
188.  
     border-radius: 5px;
189.  
     display: block;
190.  
     margin: 8px auto;
191.  
     -webkit-transition: all 0.3s ease-in-out;
192.  
     -o-transition: all 0.3s ease-in-out;
193.  
     transition: all 0.3s ease-in-out;
194.  
     }
195.  
      
196.  
     &.is-active {
197.  
     animation: smallbig 0.6s forwards;
198.  
     }
199.  
      
200.  
     &.is-active .line:nth-child(1) {
201.  
     -webkit-transform: translateY(13px) rotate(45deg);
202.  
     -ms-transform: translateY(13px) rotate(45deg);
203.  
     -o-transform: translateY(13px) rotate(45deg);
204.  
     transform: translateY(13px) rotate(45deg);
205.  
     }
206.  
      
207.  
     &.is-active .line:nth-child(2) {
208.  
     opacity: 0;
209.  
     }
210.  
      
211.  
     &.is-active .line:nth-child(3) {
212.  
     -webkit-transform: translateY(-13px) rotate(-45deg);
213.  
     -ms-transform: translateY(-13px) rotate(-45deg);
214.  
     -o-transform: translateY(-13px) rotate(-45deg);
215.  
     transform: translateY(-13px) rotate(-45deg);
216.  
     }
217.  
      
218.  
     .hamburger-3.is-active .line:nth-child(1),
219.  
     .hamburger-3.is-active .line:nth-child(2),
220.  
     .hamburger-3.is-active .line:nth-child(3) {
221.  
     -webkit-transition-delay: 0.2s;
222.  
     -o-transition-delay: 0.2s;
223.  
     transition-delay: 0.2s;
224.  
     }
225.  
      
226.  
     @keyframes smallbig {
227.  
     0%, 100% {
228.  
     -webkit-transform: scale(1);
229.  
     -ms-transform: scale(1);
230.  
     -o-transform: scale(1);
231.  
     transform: scale(1);
232.  
     }
233.  
      
234.  
     50% {
235.  
     -webkit-transform: scale(0);
236.  
     -ms-transform: scale(0);
237.  
     -o-transform: scale(0);
238.  
     transform: scale(0);
239.  
     }
240.  
     }
241.  
     }
242.  
     /* ---- / hamburger-3 ---- */
243.  
     }
244.  
     </style>

二、运行效果

这篇好文章是转载于：学新通技术网