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

1.实现效果

弹出menu.gif

2.实现原理

animation动画，transform属性，rotateZ+translate

3.实现代码

<image src="https://i.postimg.cc/Gpm5bmJz/image.png" class="icon {{isShow ? 'a1':'a10'}}"></image>
<image src="https://i.postimg.cc/dVshQb74/image.png" class="icon {{isShow ? 'a2':'a20'}}"></image>
<image src="https://i.postimg.cc/prQdRCRw/image.png" class="icon {{isShow ? 'a3':'a30'}}"></image>
<image src="https://i.postimg.cc/y89F9XfG/add.png" 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
    })
  },
})

4.更多小程序代码，关注苏苏的码云