starwait/pages/index.vue

<script setup lang="ts">

definePageMeta({
  // 使用自定义模板
  layout: 'start',
})
// 离开页面的时机
const leaveTime = ref(false)
// 离开前路由拦截
onBeforeRouteLeave((to, from, next) => {
  leaveTime.value = true
  setTimeout(() => {
    next(true)
  }, 1100)
})
</script>

<template>
  <div class="relative w-screen h-screen overflow-hidden flex items-center justify-center">
    <div class="myFace top-0" :class="leaveTime ? 'myFaceLeave' : ''"></div>
    <div class="myFace bottom-0" :class="leaveTime ? 'myFaceLeave' : ''"></div>
    <div class="myContainer text-center font-bold">
      <div class="content">
        <span>STAR</span><span>WAIT<div class="myMask"></div></span>
      </div>
      <div class="entry" :class="leaveTime ? 'entryGo' : ''">
        <div class="cursor-pointer">
          <nuxt-link to="/home">Entry</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.myFace {
  position: absolute;
  width: 100%;
  animation: HalfScreen 1s ease-in-out forwards;
  background: #000;
  left: 0;
}
.myFaceLeave{
  animation: LeaveHalfScreen 1s ease-in-out forwards !important;
}

.myContainer {
  position: relative;
  width: 360px;
  color: #000;
  font-size: 32px;
  letter-spacing: 4px;

  & > div.content > span {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    padding: 0 10px;
    animation: ChangeColor 1s ease-in-out 0.65s forwards;

    & > div.myMask {
      position: absolute;
      overflow: hidden;
      box-sizing: border-box;
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      font-size: inherit;
      color: #000;
      background: #fefefe;
      animation: ChangeWidth 1s ease-in-out 1.2s forwards;

      &:last-child::after {
        content: 'WAIT';
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 10px;
        text-align: center;
        left: 0;
        font-size: inherit;
        background: transparent;
        color: #000;
      }
    }
  }

  & > div.entry {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4em;
    overflow: hidden;
    border-radius: 8px;
    font-size: 18px;
    width: 6em;
    height: 2.3em;
    margin: 0 auto;
    opacity: 0;
    animation: ShowEntry 1s ease-in-out 1s forwards, gradient 3s ease 1s infinite;
    background: linear-gradient(45deg, #00dc82, #36e4da, #ff7e5f);
    background-size: 600% 600%; /* 设置背景大小 */
    &.entryGo{
      animation: HideEntry 300ms ease-in-out forwards !important;
    }
    & > div {
      position: relative;
      height: 100%;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(20px);
      border: 3px solid #fefefe88;
    }
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes ShowEntry {
  0% {
    opacity: 0;
    bottom: -400em;
  }
  1% {
    bottom: -4em;
  }
  100% {
    opacity: 1;
  }
}
@keyframes HideEntry {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ChangeWidth {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes ChangeColor {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}

@keyframes HalfScreen {
  from {
    height: 0;
  }
  to {
    height: 50%;
  }
}
@keyframes LeaveHalfScreen {
  from {
    height: 50%;
  }
  to {
    height: 0;
  }
}
</style>