实现将牌放大缩小的效果css

* 放大缩小正面 */
.front-pai{
  width: 200rpx;
  height: 258rpx;
  background-color: #e24444;
  padding-bottom: 14rpx;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform-origin: center;
  transform: scale(1,1);
  transition: opacity .8s, transform .8s;
}
/* 放大缩小的结果面 */
.back-pai{
  width: 200rpx;
  height: 258rpx;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform-origin: center;
  transform: scale(0,0);
  transition: opacity .8s, transform .8s .5s;
}
/* 放大缩小效果 */
.front-ani{
  opacity: 0;
  transform: scale(0,0);
}
.back-ani{
  opacity: 1;
  transform: scale(1,1);
}

posted @ 2021-03-04 17:31  搬砖的苦行僧  阅读(94)  评论(0编辑  收藏  举报