CSS100Day(2)-菜单按钮动画

1
:root {
2
    --menu-icon-line-height: 8px;
3
    --menu-icon-line-space: 14px;
4
    --menu-icon-line-offsetY: calc(var(--menu-icon-line-height) + var(--menu-icon-line-space));
5
    --menu-icon-height: calc(var(--menu-icon-line-height) * 3 + var(--menu-icon-line-space) * 2);
6
    --cubic-bezier-in: cubic-bezier(0.3, 1, 0.7, 1);
7
}
8
/* ===== 容器 ===== */
9
.frame {
10
    position: relative;
11
    width: 400px;
12
    height: 400px;
13
    background: #3faf82;
14
    box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.3);
15
    color: #fff;
16
    margin: 10px auto;
17
}
18
.center {
19
    position: absolute;
20
    top: 50%;
21
    left: 50%;
22
    translate: -50% -50%;
23
}
24
/* ===== 禁用动画 ===== */
25
.no-animation {
26
    animation: none !important;
27
}
28
/* ===== 菜单图标 ===== */
29
.menu-icon {
30
    width: 80px;
31
    height: var(--menu-icon-height);
32
    cursor: pointer;
33
    z-index: 50;
34
}
35
/* 三条线共用 */
36
.menu-icon .line-1,
37
.menu-icon .line-2,
38
.menu-icon .line-3 {
39
    height: var(--menu-icon-line-height);
40
    width: 100%;
41
    background-color: #fff;
42
    border-radius: 3px;
43
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
44
}
45
.menu-icon .line-2 {
46
    margin: var(--menu-icon-line-space) 0;
47
}
48
/* 默认状态：反转动画（恢复三条线） */
49
.menu-icon .line-1 {
50
    animation: animate-line-1-rev 0.7s var(--cubic-bezier-in) forwards;
51
}
52
.menu-icon .line-2 {
53
    animation: animate-line-2-rev 0.7s var(--cubic-bezier-in) forwards;
54
}
55
.menu-icon .line-3 {
56
    animation: animate-line-3-rev 0.7s var(--cubic-bezier-in) forwards;
57
}
58
/* 激活状态：变形为 X */
59
.menu-icon.active .line-1 {
60
    animation: animate-line-1 0.7s var(--cubic-bezier-in) forwards;
61
}
62
.menu-icon.active .line-2 {
63
    animation: animate-line-2 0.7s var(--cubic-bezier-in) forwards;
64
}
65
.menu-icon.active .line-3 {
66
    animation: animate-line-3 0.7s var(--cubic-bezier-in) forwards;
67
}
68
/* ===== 关键帧 ===== */
69
@keyframes animate-line-1 {
70
    0% {
71
        transform: translate3d(0, 0, 0) rotate(0deg);
72
    }
73
    50% {
74
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(0);
75
    }
76
    100% {
77
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(45deg);
78
    }
79
}
80
@keyframes animate-line-2 {
81
    0% {
82
        scale: 1;
83
        opacity: 1;
84
    }
85
    100% {
86
        scale: 0;
87
        opacity: 0;
88
    }
89
}
90
@keyframes animate-line-3 {
91
    0% {
92
        transform: translate3d(0, 0, 0) rotate(0deg);
93
    }
94
    50% {
95
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(0);
96
    }
97
    100% {
98
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(-45deg);
99
    }
100
}
101
@keyframes animate-line-1-rev {
102
    0% {
103
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(45deg);
104
    }
105
    50% {
106
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(0);
107
    }
108
    100% {
109
        transform: translate3d(0, 0, 0) rotate(0deg);
110
    }
111
}
112
@keyframes animate-line-2-rev {
113
    0% {
114
        scale: 0;
115
        opacity: 0;
116
    }
117
    100% {
118
        scale: 1;
119
        opacity: 1;
120
    }
121
}
122
@keyframes animate-line-3-rev {
123
    0% {
124
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(-45deg);
125
    }
126
    50% {
127
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(0);
128
    }
129
    100% {
130
        transform: translate3d(0, 0, 0) rotate(0deg);
131
    }
132
}