android 汉堡菜单动画,很棒的CSS动画汉堡包菜单
cssbody{padding:0px;margin:0px;width:100%;height:100vh;background: radial-gradient(#B53471, #6F1E51);}.wrapper{width:100px;height:100px;position: absolute;left:50%;top:50%;transform: translate(-50%, -
css
body{
padding:0px;
margin:0px;
width:100%;
height:100vh;
background: radial-gradient(#B53471, #6F1E51);
}
.wrapper{
width:100px;
height:100px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.nav{
width:64px;
height:64px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
padding: 0px;
background-color:transparent;
border-style:none;
outline: none;
cursor: pointer;
}
.nav span{
width:100%;
height:5px;
background-color:#fff;
display:block;
position: absolute;
border-radius: 2px;
transition: all .5s ease;
}
.nav span:nth-child(1){
top:0px;
left:0px;
}
.nav span:nth-child(2){
top:20px;
right:0px;
}
.nav span:nth-child(3){
top:40px;
left:0px;
}
.nav.open span:nth-child(2){
animation: span2 1.5s forwards cubic-bezier(.8, .5, .2, 1.4);
}
@keyframes span2{
0%{
transform: translate(0,0) scale(1);
}
20%{
width:5px;
border-radius: 50%;
transform: translate(0,0) scale(1);
}
40%{
width:5px;
border-radius: 50%;
transform: translate(0,0) scale(1);
}
50%{
width:5px;
border-radius: 50%;
transform: translate(0,18px) scale(1);
}
80%{
width:5px;
border-radius: 50%;
transform: translate(0,-16px) scale(1);
}
100%{
width:5px;
border-radius: 50%;
transform: translate(0,100px) scale(0);
}
}
.nav.open span:nth-child(3){
animation: span3 .8s forwards cubic-bezier(.8, .5, .2, 1.4);
animation-delay: .7s;
}
@keyframes span3{
0%{
transform: translate(0,0);
}
60%{
transform: rotate(80deg) translate(-7px, -7px);
}
100%{
transform: rotate(45deg) translate(-7px, -7px);
}
}
.nav.open span:nth-child(1){
animation: span1 .8s forwards cubic-bezier(.8, .5, .2, 1.4);
animation-delay: 1.1s;
}
@keyframes span1{
0%{
transform: translate(0,0);
}
60%{
transform: rotate(-110deg) translate(-7px, -7px);
}
100%{
transform: rotate(-45deg) translate(-20px, 20px);
}
}
.nav span:nth-child(1){
animation: span1_close .8s forwards cubic-bezier(.8, .5, .2, 1.4);
}
@keyframes span1_close {
0%{
transform: rotate(-45deg) translate(-20px, 20px);
}
100%{
transform: rotate(0deg) translate(0, 0);
}
}
.nav span:nth-child(2){
animation: span2_close .8s forwards cubic-bezier(.8, .5, .2, 1.4);
}
@keyframes span2_close{
0%{
transform: translate(0, 40px) scale(0);
}
100%{
transform: translate(0, 0) scale(1);
}
}
.nav span:nth-child(3){
animation: span3_close .8s forwards cubic-bezier(.8, .5, .2, 1.4);
}
@keyframes span3_close{
0%{
transform: rotate(45deg) translate(-7px, -7px);
}
100%{
transform: rotate(0deg) translate(0, 0);
}
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)