|
78 background: #000;
79 border-radius: 6px;
80 -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
81 transition: background-color 0.3s, -webkit-transform 0.3s;
82 transition: background-color 0.3s, transform 0.3s;
83 transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
84 }
85 .menu .btn-trigger .line:before {
86 top: -12px;
87 -webkit-transform-origin: 15% 100%;
88 transform-origin: 15% 100%;
89 }
90 .menu .btn-trigger .line:after {
91 top: 12px;
92 -webkit-transform-origin: 25% 30%;
93 transform-origin: 25% 30%;
94 }
95 .menu .rotater{
96 position: absolute;
97 top: 0;
98 left: 0;
99 width: 100%;
100 height: 100%;
101 }
102 .menu.active .btn-icon{
103 opacity:1;
104 z-index:50;
105 }
106 .menu.active .btn-trigger .line{
107 height:0;
108 top:45%;
109 }
110 .menu.active .btn-trigger .line:before{
111 -webkit-transform: rotate(45deg);
112 transform: rotate(45deg);
113 width:110%;
114 }
115 .menu.active .btn-trigger .line:after{
116 -webkit-transform: rotate(-45deg);
117 transform: rotate(-45deg);
118 width:110%;
119 }
120 /* 为每一个菜单添加旋转和平移效果 */
121 .rotater:nth-child(1){
122 -webkit-transform: rotate(-45deg);
123 transform: rotate(-45deg);
124 }
125 .menu.active .rotater:nth-child(1) .btn-icon{
126 -webkit-transform: translateY(-10em) rotate(45deg);
127 transform: translateY(-10em) rotate(45deg);
128 }
129 .rotater:nth-child(2){
130 -webkit-transform: rotate(0deg);
131 transform: rotate(0deg);
132 }
133 .menu.active .rotater:nth-child(2) .btn-icon{
134 -webkit-transform: translateY(-10em);
135 transform: translateY(-10em);
136 }
137 .rotater:nth-child(3){
138 -webkit-transform: rotate(45deg);
139 transform: rotate(45deg);
140 }
141 .menu.active .rotater:nth-child(3) .btn-icon{
142 -webkit-transform: translateY(-10em) rotate(-45deg);
143 transform: translateY(-10em) rotate(-45deg);
144 }
145 .rotater:nth-child(4){
146 -webkit-transform: rotate(90deg);
147 transform: rotate(90deg);
148 }
149 .menu.active .rotater:nth-child(4) .btn-icon{
150 -webkit-transform: translateY(-10em) rotate(-90deg);
151 transform: translateY(-10em) rotate(-90deg);
152 }
153 .rotater:nth-child(5){
154 -webkit-transform: rotate(135deg);
155 transform: rotate(135deg);
156 }
157 .menu.active .rotater:nth-child(5) .btn-icon{
158 -webkit-transform: translateY(-10em) rotate(-135deg);
159 transform: translateY(-10em) rotate(-135deg);
160 }
161 .rotater:nth-child(6){
162 -webkit-transform: rotate(180deg);
163 transform: rotate(180deg);
164 }
165 .menu.active .rotater:nth-child(6) .btn-icon{
166 -webkit-transform: translateY(-10em) rotate(-180deg);
167 transform: translateY(-10em) rotate(-180deg);
168 }
169 .rotater:nth-child(7){
170 -webkit-transform: rotate(225deg);
171 transform: rotate(225deg);
172 }
173 .menu.active .rotater:nth-child(7) .btn-icon{
174 -webkit-transform: translateY(-10em) rotate(-225deg);
175 transform: translateY(-10em) rotate(-225deg);
176 }
177 .rotater:nth-child(8){
178 -webkit-transform: rotate(270deg);
179 transform: rotate(270deg);
180 }
181 .menu.active .rotater:nth-child(8) .btn-icon{
182 -webkit-transform: translateY(-10em) rotate(-270deg);
183 transform: translateY(-10em) rotate(-270d
主要用到的css属性是transition和transform.
最后再添加一点js就可以 |