css3实现红包弹出并翻转效果

菜鸟中的菜菜鸟

已于 2024-01-09 14:38:34 修改

阅读量886

点赞数 10

于 2023-12-15 14:48:50 首次发布

本文链接：https://blog.csdn.net/qq_39692513/article/details/135016887

版权

template

  <div class="content"> // 整体弹窗
      <div class="info"> </div> // 红包内容
      <div class="cover" ></div> // 红包封面
    </div>

css3 动画实现弹出并翻转效果

@keyframes zoom {  // 红包出现放大再缩小动画
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }

    90% {
      opacity: 1;
      transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

 @keyframes flipBack {   // 红包封面翻转动画
 0% {
      opacity: 1;
      transform: rotateY(180deg);
    }
    50% {
      opacity: 1;
      transform: rotateY(20deg);
    }
    100% {
      opacity: 1;
      transform: rotateY(0deg);
    }
  }

  @keyframes flipFront {  // 红包内容翻转动画
  0% {
      transform: rotateY(0deg);
    }
    50% {
      transform: rotateY(160deg);
    }
    100% {
      transform: rotateY(180deg);
      opacity: 0;
    }
  }

  .content {
    position: absolute; // 红包弹窗
    top: 50%;
    left: 50%;
    margin-left: -128.5px;
    margin-top: -186px; // 居中
    width: 257px;
    height: 372px;
    animation: zoom 0.5s; // 红包整体出现放大在缩小效果
    .cover {
      position: absolute; 
      width: 100%;
      height: 100%;
      background:red;
      animation: flipFront 0.8s; // 封面动画
      animation-delay: 0.8s; // 延迟等红包弹窗出现之后再反转
      animation-fill-mode: forwards;
      backface-visibility: hidden; // 元素反转后不可见
          }
  .info {
      position: absolute;
      width: 100%;
      height: 100%;
     background:black;
      animation: flipBack 0.8s; // 红包内容
       animation-delay: 0.8s;
      animation-fill-mode: forwards;
      backface-visibility: hidden; // 元素反转后不可见
      opacity: 0;
     }
}