微信小程序纯css实现一个弹出的菜单

过了腊八就是年

如何用css实现一个弹出的菜单？

看看实现效果

实现要点

• animation动画
• transform属性
• rotateZ+translate

实现代码

<image src="https://i.postspan data=''/> class="icon {{isShow ? 'a1':'a10'}}"></image><image src="https://i.postspan data=''/> class="icon {{isShow ? 'a2':'a20'}}"></image><image src="https://i.postspan data=''/> class="icon {{isShow ? 'a3':'a30'}}"></image><image src="https://i.postspan data=''/> class="icon_new {{isShow ? 'a0' :'a00'}}" catchtap="btnPop"></image>

/* pages/effects/popMenu/index2.wxss */page {  background-color: #fff;}
.icon {  height: 100rpx;  width: 100rpx;  position: absolute;  bottom: 250rpx;  right: 100rpx;  opacity: 0;}
.icon_new {  height: 100rpx;  width: 100rpx;  position: absolute;  bottom: 250rpx;  right: 100rpx;  z-index: 100;}
.a0 {  animation: a0 500ms ease-out forwards;}
@keyframes a0 {  0% {    transform: rotateZ(0deg);  }
  100% {    transform: rotateZ(180deg);  }}
.a00 {  animation: a00 500ms ease-out forwards;}
@keyframes a00 {  0% {    transform: rotateZ(180deg);  }
  100% {    transform: rotateZ(0deg);  }
}
.a1 {  animation: a1 500ms ease-out forwards;}
@keyframes a1 {  0% {    transform: translate(0, 0) rotateZ(0deg);    opacity: 0;  }
  100% {    transform: translate(-65px, -70px) rotateZ(360deg);    opacity: 1;  }}
.a10 {  animation: a10 500ms ease-out forwards;}
@keyframes a10 {  0% {    transform: translate(-65px, -70px) rotateZ(360deg);    opacity: 1;  }
  100% {    transform: translate(0, 0) rotateZ(0deg);    opacity: 0;  }}
.a2 {  animation: a2 500ms ease-out forwards;}
@keyframes a2 {  0% {    transform: translate(0, 0) rotateZ(0deg);    opacity: 0;  }
  100% {    transform: translate(-120px, -0px) rotateZ(360deg);    opacity: 1;  }}
.a20 {  animation: a20 500ms ease-out forwards;}
@keyframes a20 {  0% {    transform: translate(-120px, -0px) rotateZ(360deg);    opacity: 1;  }
  100% {    transform: translate(0, 0) rotateZ(0deg);    opacity: 0;  }}

.a3 {  animation: a3 500ms ease-out forwards;}
@keyframes a3 {  0% {    transform: translate(0, 0) rotateZ(0deg);    opacity: 0;  }
  100% {    transform: translate(-65px, 70px) rotateZ(360deg);    opacity: 1;  }}
.a30 {  animation: a30 500ms ease-out forwards;}
@keyframes a30 {  0% {    transform: translate(-65px, 70px) rotateZ(360deg);    opacity: 1;  }
  100% {    transform: translate(0, 0) rotateZ(0deg);    opacity: 0;  }
}

Page({  data: {    isShow: null,//是否已经弹出  },  btnPop() {    this.setData({      isShow: !this.data.isShow    })  },})

源码获取，后台回复’源码’即可~