vue3 拆信封动画

一、效果如下

截图工具截图效果不是很好，可以查看线上效果
信封 | snows_l's BLOGhttp://snows-l.site/about/like/envelope
二、源码如下

html 复制代码
<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-01-02 19:05:25
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-03 15:19:59
 * @FilePath: \BLOG\src\views\love\envelope\index.vue
-->
<template>
  <div class="envelope-warp">
    <div class="envelope-inner" :style="{ scale: isMobi ? 0.6 : 1 }" :class="{ 'is-flip': state.isFlip, 'no-flip': !state.isFlip }">
      <div class="back">
        <div class="flip-warp">
          <div class="latter-warp" :class="{ 'is-chou': state.isOpen }">
            <div class="latter-top" :style="{ transform: state.isOpen ? 'rotateX(180deg)' : 'rotateX(0deg)' }">
              <div class="latter-top-front"></div>
              <div class="latter-top-back">
                <div
                  :style="{ opacity: state.isOpen ? 1 : 0, '--c': state.isOpen ? '0.5s' : '0.3s' }"
                  class="close pointer iconfont icon-cc-close-crude"
                  @click="() => (state.isOpen = false)"></div>
              </div>
            </div>
            <div class="latter-inner" :class="{ 'is-transform': state.isOpen }" :style="{ '--b': state.isOpen ? '0.7s' : '0.7s' }">
              <div class="latter-bottom">
                <div class="header">Dear Lover：</div>
                <div class="latter-content">
                  <div class="latter-content-inner">
                    <div class="latter-content-item" v-for="(item, index) in state.contents" :key="index">{{ item }}</div>
                  </div>
                </div>
                <div class="footer">------ Your Lover</div>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="flip-btn pointer" @click="handleFlip(true)">Flip</div>
          </div>

          <div class="top" :class="[state.isOpen ? 'is-open' : 'no-open']" :style="{ '--a': state.isOpen ? '0s' : '1.2s', 'z-index': state.isOpen ? '98' : '100' }">
            <div class="top-back"></div>
            <div class="top-front">
              <div class="yinzhang pointer" :style="{ 'background-position': state.isFirstOpen ? '0 100%' : '0 200%' }" @click="handleOpen"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="front">
        <h1>Dear Lover</h1>
        <div class="flip-btn pointer" @click="handleFlip(false)">Flip</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import useResize from '@/hooks/useResize';
const { isMobi } = useResize();
const state = reactive({
  isFlip: false,
  isOpen: false,
  isFirstOpen: false,

  contents: []
});

const content = `💖 见字如晤，展信舒颜。这封信承载着我对你深深的思念。

🌹 喜欢你，或许是这个世界上最无法解释的事情。不是权衡利弊，不是见色起意，而是突然间有了你，让我牵肠挂肚，无法割舍。

🌈 你是我安稳岁月里的意外，是我平淡生活里的星辰大海。我不曾搜索爱的定义，因为当我开车等红灯时，转头看到你坐在副驾驶，那就是爱；当我清晨醒来，希望第一眼看到的是你的睡颜，那也是爱。

🌅 无论是清晨的日出，还是正午的悠闲，或是漫天星辰的夜晚，我都想与你共度。我的爱，无需理由，只因是你。

💍 遇见你，是故事的开始；而你，是我余生的欢喜。做过最勇敢的事，就是在最真实的时候选择送你离开，因为你值得更好的。

🌸 你是一树一树的花开，是温暖的希望，是人间四月天。我试图诅咒你，只因你只能待在我身边，只爱我一个人。但我知道，人生短暂，我想娶自己爱的人。

🌻 你是我生命中不可或缺的一部分，是我一生的希望。我不想放弃你，不想放弃爱的感觉。我不想再让你孤单，不想再让你孤独。

🌼 你是我生命中最美的风景，是我生命中最值得珍惜的记忆。

🌲 你是我生命中最美的记忆，是我生命中最珍贵的回忆。

🌴 你是我生命中最美的风景，是我生命中最值得珍惜的记忆

🌱 你是我生命中最美的记忆，是我生命中最珍贵的回忆

👨‍❤️‍👩‍👧‍👦 我曾以为我会孤独终老，直到遇见你。我不敢承诺一生不惹你生气，但在我能想象的未来里，只想对你一个人好。纵使生活不易，我还是想把你放在未来里，一生欢喜，纯净如初。
`;

state.contents = content.split('\n');

// 信封翻转
const handleFlip = (isBackFlip: boolean = false) => {
  if (isBackFlip && state.isOpen) {
    state.isOpen = false;
    setTimeout(() => {
      state.isFlip = !state.isFlip;
    }, 1.4 * 1000);
  } else {
    state.isFlip = !state.isFlip;
  }
};

// 打开/关闭信封
const handleOpen = () => {
  state.isOpen = !state.isOpen;
  if (!state.isFirstOpen) state.isFirstOpen = true;
};
</script>

<style lang="scss" scoped>
.envelope-warp {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .envelope-inner {
    margin-top: 100px;
    position: relative;
    width: 600px;
    height: 300px;
    .front {
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 600px;
      height: 300px;
      font-size: 1.25em;
      background: url('@/assets/images/common/letterStamp.png') no-repeat 20px 20px, beige url('@/assets/images/common/letterBg.png');
      border: 1px solid #eae1d5;
      box-shadow: inset 0 0 10px 1px hsla(0, 0%, 100%, 0.6), 0 2px 3px -2px rgba(0, 0, 0, 0.6);
      padding: 20px;
      color: #837362;
      text-shadow: 0 1px 0 #fff, 0 1px 0 #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .flip-btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .back {
      transform: rotateY(-180deg);
      position: absolute;
      top: 0;
      left: 0;
      width: 600px;
      height: 300px;
      color: #837362;
      background-color: #837362;
      text-shadow: 0 1px 0 #fff, 0 1px 0 #fff;
      .flip-warp {
        width: 600px;
        height: 300px;
        position: relative;
        perspective: 100;
        // 信封 上半部分
        .top {
          transform-style: preserve-3d;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 101;
          width: 100%;
          height: 150px;
          border-bottom-right-radius: 30px;
          border-bottom-left-radius: 30px;
          box-shadow: inset 0 0 10px 1px hsla(0, 0%, 100%, 0.6), 0 2px 3px -2px rgba(0, 0, 0, 0.6);
          transition: transform 0.7s ease var(--a), z-index 0.7s ease var(--a);
          transform-origin: top center;

          .top-front {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 150px;
            background: beige url('@/assets/images/common/letterBg.png');
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 30px;
            border-bottom: 1px solid #eae1d5;
            .yinzhang {
              width: 150px;
              height: 150px;
              background-image: url('@/assets/images/common/letterStitch.png');
              background-size: 100% 200%;
              position: absolute;
              bottom: -71px;
              left: 50%;
              margin-left: -75px;
            }
          }
          .top-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 150px;
            background-color: #837362;
            border: 35px solid hsla(0, 0%, 100%, 0.1);
            border-top: 2px solid #8f8579;
            box-shadow: inset 0 10px 30px 10px rgba(0, 0, 0, 0.1);
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 30px;
          }
        }
        // 信封 下半部分
        .bottom {
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 100;
          width: 100%;
          height: 200px;
          background: beige url('@/assets/images/common/letterBg.png');
          border: 1px solid #eae1d5;
          box-shadow: inset 0 0 10px 1px hsla(0, 0%, 100%, 0.6), 0 2px 3px -2px rgba(0, 0, 0, 0.6);
          .flip-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 18px;
            font-weight: 600;
          }
        }

        // 信纸
        .latter-warp {
          background-color: #fff;
          margin: 5%;
          width: 90%;
          position: absolute;
          left: 0;
          top: -8%;
          z-index: 99;
          transition: all 0.7s ease 0.7s;
          .latter-top {
            height: 40px;
            background-color: #fff;
            transform-style: preserve-3d;
            transition: transform 0.7s ease 0.3s;
            transform-origin: top center;
            // backface-visibility: hidden;
            .latter-top-back {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              padding: 10px 20px;
              font-size: 16px;
              font-weight: 600;
              // background-color: #f2f2f2;
              border-bottom: 1px solid #f2f2f2;
              border-top: 1px solid #f2f2f2;
              .close {
                transition: all 0.3s ease var(--c);
              }
            }
            .latter-top-front {
              position: absolute;
              top: 0px;
              left: 0;
              height: 100%;
              width: 100%;
            }
          }
          .latter-inner {
            margin-top: -40px;
            backface-visibility: hidden;
            width: 100%;
            height: 100%;
            transform: rotateX(-180deg);
            transform-style: preserve-3d;
            transition: all 0.7s ease var(--b);

            .latter-bottom {
              background-color: #fff;
              .latter-content {
                padding: 0 20px;
                .latter-content-inner {
                  height: 197px;
                  overflow-y: auto;
                  .latter-content-item {
                    line-height: 24px;
                    font-size: 16px;
                    text-indent: 32px;
                    min-height: 24px;
                  }
                }
              }
              .header {
                height: 27px;
                line-height: 27px;
                padding: 0 20px;
                text-align: left;
                margin: 8px 0;
                font-size: 20px;
                font-weight: 600;
              }
              .footer {
                padding: 18px 0;
                line-height: 27px;
                padding: 0 20px;
                text-align: right;
                margin: 12px 0;
                font-size: 20px;
                font-weight: 600;
              }
            }
          }
          .is-transform {
            transform: rotateX(0deg);
          }
        }
        .is-chou {
          transform: translateY(-68%);
        }
      }
    }
  }
  .is-flip {
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: transform 0.7s 0s;
    transform-origin: center center;
  }
  .no-flip {
    transform: rotateY(360deg);
    transform-style: preserve-3d;
    transition: transform 0.7s 0s;
    transform-origin: center center;
  }

  .is-open {
    transform: rotateX(-180deg);
  }

  .no-open {
    transform: rotateX(0deg);
  }
}

@keyframes flip {
}
</style>
如果想要资源的直接去我的 snows_l's BLOG 打开开发者工具直接拿就行了