纯CSS3实现H5常见的三横杠菜单点击变叉动画

汉堡（三横杠）菜单是移动菜单的开关，所以很多人会追求它的样式设计、动画设计如何更美观好看，本文介绍3款纯CSS3实现的汉堡（三横杠）菜单点击变叉动画。

效果图

< class="alignnone size-medium wp-image-73391" src="http://blog.jsudo.com/wp-content/uploads/2023/06/202306161405405862-300x112.gif" alt="" width="300" height="112" />

HTML

下面是3款菜单的HTML结构，它们的代码是一样的，不同的是它们的CSS样式。

1. <divclass="hamburger"id="hamburger-1"onclick="this.classList.toggle('is-active')"><spanclass="line"></span><spanclass="line"></span><spanclass="line"></span></div>
3. <divclass="hamburger"id="hamburger-2"onclick="this.classList.toggle('is-active')"><spanclass="line"></span><spanclass="line"></span><spanclass="line"></span></div>
5. <divclass="hamburger"id="hamburger-3"onclick="this.classList.toggle('is-active')"><spanclass="line"></span><spanclass="line"></span><spanclass="line"></span></div>

我们看到，每个div标签有一个

onclick

属性，这是鼠标点击事件，点击图标后三横杠和叉这两个图标以动画形式切换。

CSS

下面是3款菜单的CSS样式。

示例1

1. #hamburger-1.is-active.line:nth-child(2){
2. opacity:0;
3. }
4. #hamburger-1.is-active.line:nth-child(1){
5. -webkit-transform:translateY(13px)rotate(45deg);
6. -ms-transform:translateY(13px)rotate(45deg);
7. -o-transform:translateY(13px)rotate(45deg);
8. transform:translateY(13px)rotate(45deg);
9. }
10. #hamburger-1.is-active.line:nth-child(3){
11. -webkit-transform:translateY(-13px)rotate(-45deg);
12. -ms-transform:translateY(-13px)rotate(-45deg);
13. -o-transform:translateY(-13px)rotate(-45deg);
14. transform:translateY(-13px)rotate(-45deg);
15. }

示例2

1. #hamburger-2{
2. position:relative;
3. -webkit-transition:all0.3sease-in-out;
4. -o-transition:all0.3sease-in-out;
5. transition:all0.3sease-in-out;
6. }
7. #hamburger-2.is-active{
8. -webkit-transform:rotate(45deg);
9. -ms-transform:rotate(45deg);
10. -o-transform:rotate(45deg);
11. transform:rotate(45deg);
12. }
13. #hamburger-2:before{
14. content:"";
15. position:absolute;
16. -webkit-box-sizing:border-box;
17. -moz-box-sizing:border-box;
18. box-sizing:border-box;
19. width:70px;
20. height:70px;
21. border:5pxsolidtransparent;
22. top:calc(50%-35px);
23. left:calc(50%-35px);
24. border-radius:100%;
25. -webkit-transition:all0.3sease-in-out;
26. -o-transition:all0.3sease-in-out;
27. transition:all0.3sease-in-out;
28. }
29. #hamburger-2.is-active:before{
30. border:5pxsolid#ecf0f1;
31. }
32. #hamburger-2.is-active.line{
33. width:35px;
34. }
35. #hamburger-2.is-active.line:nth-child(2){
36. opacity:0;
37. }
38. #hamburger-2.is-active.line:nth-child(1){
39. -webkit-transform:translateY(13px);
40. -ms-transform:translateY(13px);
41. -o-transform:translateY(13px);
42. transform:translateY(13px);
43. }
44. #hamburger-2.is-active.line:nth-child(3){
45. -webkit-transform:translateY(-13px)rotate(90deg);
46. -ms-transform:translateY(-13px)rotate(90deg);
47. -o-transform:translateY(-13px)rotate(90deg);
48. transform:translateY(-13px)rotate(90deg);
49. }

示例3

1. #hamburger-3{
2. -webkit-transition:all0.3sease-in-out;
3. -o-transition:all0.3sease-in-out;
4. transition:all0.3sease-in-out;
5. }
6. #hamburger-3.is-active{
7. animation:smallbig0.6sforwards;
8. }
9. @keyframessmallbig{
10. 0%,100%{
11. -webkit-transform:scale(1);
12. -ms-transform:scale(1);
13. -o-transform:scale(1);
14. transform:scale(1);
15. }
16. 50%{
17. -webkit-transform:scale(0);
18. -ms-transform:scale(0);
19. -o-transform:scale(0);
20. transform:scale(0);
21. }
22. }
23. #hamburger-3.is-active.line:nth-child(1),#hamburger-3.is-active.line:nth-child(2),#hamburger-3.is-active.line:nth-child(3){
24. -webkit-transition-delay:0.2s;
25. -o-transition-delay:0.2s;
26. transition-delay:0.2s;
27. }
28. #hamburger-3.is-active.line:nth-child(2){
29. opacity:0;
30. }
31. #hamburger-3.is-active.line:nth-child(1){
32. -webkit-transform:translateY(13px)rotate(45deg);
33. -ms-transform:translateY(13px)rotate(45deg);
34. -o-transform:translateY(13px)rotate(45deg);
35. transform:translateY(13px)rotate(45deg);
36. }
37. #hamburger-3.is-active.line:nth-child(3){
38. -webkit-transform:translateY(-13px)rotate(-45deg);
39. -ms-transform:translateY(-13px)rotate(-45deg);
40. -o-transform:translateY(-13px)rotate(-45deg);
41. transform:translateY(-13px)rotate(-45deg);
42. }

CSS解释

我们看到，CSS主要代码是使用 transition 和 transform 两个属性来实现，这两个是动画属性。下面文章详述了这两个属性的使用。