主页面动画

<template>
  <div class="home">
    <!-- 背景图 -->
    <div class="images">
      <img src="@/assets/stars.png" ref="stars" class="stars" />
      <img src="@/assets/moon.png" ref="moon" class="moon" />
      <img src="@/assets/behind.png" ref="behind" class="behind" />
      <p ref="txt" class="txt">Moon Light</p>
      <router-link to="./animation">
        <p ref="btn" class="btn">Animation</p>
      </router-link>
      <img src="@/assets/front.png" ref="front" class="front" />
    </div>
    <div class="navBar" ref="navBar">
      <router-link to="./login">
        <i class="logo">Logo</i>
      </router-link>
      <ul>
        <li>
          <router-link to="./login">
            <span>login</span>
          </router-link>
        </li>
        <li>
          <router-link to="./404">
            <span>404</span>
          </router-link>
        </li>
        <li>
          <router-link to="./animation">
            <span>Animation</span>
          </router-link>
        </li>
        <li>
          <router-link to="./loading">
            <span>loading</span>
          </router-link>
        </li>
        <li>
          <router-link to="./button">
            <span>button</span>
          </router-link>
        </li>
        <li>
          <router-link to="./carousel">
            <span>Carousel</span>
          </router-link>
        </li>
        <li>
          <router-link to="./navBar">
            <span>NavBar</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const stars = ref({})
const moon = ref({})
const txt = ref({})
const btn = ref({})
const navBar = ref({})
onMounted(() => {
  // 监听滚动条位置
  window.addEventListener('scroll', scrollTop, true)
}
)
onUnmounted(() => {
  window.removeEventListener('scroll', scrollTop, true)
})
// 实时滚动条高度
const scrollTop = () => {
  const y = document.documentElement.scrollTop || document.body.scrollTop
  stars.value.style.left = y * 0.25 + 'px'
  moon.value.style.top = y * 0.8 + 'px'
  txt.value.style.marginRight = y * 4 + 'px'
  txt.value.style.marginTop = y * 0.8 + 'px'
  btn.value.style.marginTop = y * 1.5 + 'px'
  navBar.value.style.top = y * 0.5 + 'px'
}
</script>
<style scoped lang="less">
.home {
  background: linear-gradient(#2b1055, #7597de);

  .images {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;

    .stars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: linear-gradient(to top, #1c0522, transparent);
      z-index: 0;
      object-fit: cover;
      pointer-events: none;
    }

    .moon {
      /* 设置图片元素与父容器背景进行混合，图片会变暗 */
      mix-blend-mode: screen;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      pointer-events: none;
      z-index: 1;
    }

    .behind {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      pointer-events: none;
      z-index: 0;
    }

    .txt {
      position: absolute;
      top: 200px;
      right: -350px;
      color: #fff;
      white-space: nowrap;
      font-size: 60px;
      z-index: 0;
    }

    .btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 8px 30px;
      border-radius: 40px;
      background: #fff;
      color: #2b1055;
      font-size: 1.5em;
      z-index: 1;
    }

    .front {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      pointer-events: none;
      z-index: 2;
    }
  }

  .navBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 200px;
    z-index: 1000;

    .logo {
      color: #fff;
      font-size: 35px;
    }

    ul {
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        list-style: none;
        margin-left: 20px;

        span {
          text-decoration: none;
          padding: 6px 15px;
          color: #fff;
          border-radius: 20px;
        }

        span:hover,
        .active {
          background-color: #fff;
          color: #2b1055;
        }
      }
    }
  }

  .content {
    position: relative;
    background: pink;

    h2 {
      font-size: 3.5em;
      margin-bottom: 10px;
      color: #fff;
    }

    p {
      font-size: 1.2em;
      color: #fff;
    }
  }
}
</style>