效果图

HTML

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>

onclick

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解释