sagaclound-sagacare-sk/src/views/home/tiantan.vue

<template>
  <div class="main" v-if="showFalg">
    <video id="video1" muted autoplay>
      <!-- <source src="/sk/skImage/媒体1.mp4" type="video/mp4" /> -->
      <source src="/sk/skImage/720p.mp4" type="video/mp4" />
      您的浏览器不支持 HTML5 video 标签。
    </video>

    <div id="skSlogan" class="skSlogan">
      <!-- 天坛部分 -->
      <img id="ani83" class="ani83" src="/sk/skImage/蓝天.jpg" alt="" />
      <img id="ani84" class="ani84" src="/sk/skImage/云朵0.png" alt="" />

      <img id="ani85" class="ani85" src="/sk/skImage/鸽子1-白色.gif" alt="" />
      <img id="ani86" class="ani86" src="/sk/skImage/鸽子2-白色.gif" alt="" />
      <img id="ani87" class="ani87" src="/sk/skImage/鸽子1-白色.gif" alt="" />
      <img id="ani88" class="ani88" src="/sk/skImage/鸽子2-白色.gif" alt="" />

      <img id="ani8" class="ani8" src="/sk/skImage/天坛1.png" alt="" />
      <img id="ani82" class="ani82" src="/sk/skImage/天坛2.png" alt="" />

      <img id="ani9" class="ani9" src="/sk/skImage/蝴蝶2.gif" alt="" />
      <!-- 天坛左上 -->
      <img id="ani1" class="ani1" src="/sk/skImage/ani1.jpg" alt="" />
      <!-- 左上鸽子 -->
      <!-- <img id="ani5" class="ani5" src="/sk/skImage/ani5.jpg" alt=""> -->
      <img id="ani51" class="ani51" src="/sk/skImage/鸽子1-橙色.gif" alt="" />
      <img id="ani52" class="ani52" src="/sk/skImage/鸽子2-橙色.gif" alt="" />
      <img id="ani53" class="ani53" src="/sk/skImage/鸽子1-橙色.gif" alt="" />
      <img id="ani54" class="ani54" src="/sk/skImage/鸽子2-橙色.gif" alt="" />

      <!-- 文字slogan -->
      <div id="slogan" class="slogan">
        <img
          id="slogan11"
          class="slogan11"
          src="/sk/skImage/word/幸.png"
          alt=""
        />
        <img
          id="slogan12"
          class="slogan12"
          src="/sk/skImage/word/福.png"
          alt=""
        />

        <img
          id="slogan21"
          class="slogan21"
          src="/sk/skImage/word/S.png"
          alt=""
        />
        <img
          id="slogan22"
          class="slogan22"
          src="/sk/skImage/word/U.png"
          alt=""
        />
        <img
          id="slogan23"
          class="slogan23"
          src="/sk/skImage/word/P.png"
          alt=""
        />
        <img
          id="slogan24"
          class="slogan24"
          src="/sk/skImage/word/e.png"
          alt=""
        />
        <img
          id="slogan25"
          class="slogan25"
          src="/sk/skImage/word/X.png"
          alt=""
        />

        <img
          id="slogan31"
          class="slogan31"
          src="/sk/skImage/word/P2.png"
          alt=""
        />
        <img
          id="slogan32"
          class="slogan32"
          src="/sk/skImage/word/a.png"
          alt=""
        />
        <img
          id="slogan33"
          class="slogan33"
          src="/sk/skImage/word/e2.png"
          alt=""
        />
        <img
          id="slogan34"
          class="slogan34"
          src="/sk/skImage/word/-.png"
          alt=""
        />
        <img
          id="slogan35"
          class="slogan35"
          src="/sk/skImage/word/g.png"
          alt=""
        />
        <img
          id="slogan36"
          class="slogan36"
          src="/sk/skImage/word/i.png"
          alt=""
        />
      </div>

      <img id="ani4" class="ani4" src="/sk/skImage/ani4.jpg" alt="" />

      <!-- 时间部分 -->
      <!-- <img id="ani2" class="ani2" src="/sk/skImage/ani21.jpg" alt="" />
     -->
      <div id="ani2" class="ani2">
        <div class="time-top">
          <span>北京时间</span>
          <span>首尔时间</span>
        </div>
        <div class="time-box">
          <span>{{ nowTime }}</span>
          <span></span>
          <span>{{ sTime }}</span>
        </div>
        <div class="time-line"></div>
        <div class="time-bottom">
          <img src="/sk/skImage/time-icon.svg" alt="" />
          <span>{{ nowDate }}</span>
          <div class="time-right">
            <span>{{ week }}</span>
          </div>
        </div>
      </div>
    </div>
    <div id="aniThree" class="aniThree">
      <div id="aniThree5" class="aniThree5"><img src="/sk/skImage/word/SK 1.png" alt=""></div>
      <div id="aniThree6" class="aniThree6"><img src="/sk/skImage/word/text4.png" alt=""></div>
    </div>
    <!-- <div id="aniThree" class="aniThree">
      <div id="logoLeft" class="logoLeft">
        <img src="/sk/skImage/EXPOlogo.jpg" alt="" />
      </div>
      <div id="logoRight" class="logoRight">
        <img src="/sk/skImage/skLogo.jpg" alt="" />
      </div>
      <div class="line" id="line"></div>
      <div class="text" id="text">
        <img src="/sk/skImage/text.jpg" alt="" />
      </div>
    </div> -->
  </div>
</template>
  
<script>
import { useRouter, useRoute } from "vue-router";
import { formatEnergyDate, getWeek } from "@/utils";
import $ from "jquery";
import { nextTick } from "vue";
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
} from "vue";
export default defineComponent({
  components: {},
  setup(props) {
    const formatEnergyDate = function(type = 1) {
      //三目运算符
      let dates = null;
      if (type == 2) {
        dates = new Date(new Date().setHours(new Date().getHours() + 1));
      } else {
        dates = new Date();
      }
      //月份下标是0-11
      const months =
        dates.getMonth() + 1 < 10
          ? "0" + (dates.getMonth() + 1)
          : dates.getMonth() + 1;
      //具体的天数
      const day =
        dates.getDate() < 10 ? "0" + dates.getDate() : dates.getDate();
      const year = dates.getFullYear();
      const hours =
        dates.getHours() < 10 ? "0" + dates.getHours() : dates.getHours();
      // //分钟
      const minutes =
        dates.getMinutes() < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
      const seconds =
        dates.getSeconds() < 10 ? "0" + dates.getSeconds() : dates.getSeconds();
      //返回数据格式
      return [
        year + "年" + months + "月" + day + "日",
        months + "月" + day + "日",
        hours + ":" + minutes,
      ];
    };
    const getWeek = function() {
      let week = new Date().getDay();
      let str = "";
      if (week == 0) {
        str = "星期日";
      } else if (week == 1) {
        str = "星期一";
      } else if (week == 2) {
        str = "星期二";
      } else if (week == 3) {
        str = "星期三";
      } else if (week == 4) {
        str = "星期四";
      } else if (week == 5) {
        str = "星期五";
      } else if (week == 6) {
        str = "星期六";
      }
      return str;
    };
    const router = useRouter();
    const route = useRoute();
    const proxyData = reactive({
      nowTime: formatEnergyDate()[2],
      sTime: formatEnergyDate(2)[2],
      nowDate: formatEnergyDate()[0],
      intevell: null,
      type: "",
      showFalg: false,
      week: getWeek(),
      init() {
        let myVid = document.getElementById("video1");
        let aniThree = document.getElementById("aniThree");
        let aniThree5 = document.getElementById("aniThree5");
        let aniThree6 = document.getElementById("aniThree6");
        let logoLeft = document.getElementById("logoLeft");
        let logoRight = document.getElementById("logoRight");
        let line = document.getElementById("line");
        let text = document.getElementById("text");
        let skSlogan = document.getElementById("skSlogan");
        let ani1 = document.getElementById("ani1");
        let ani2 = document.getElementById("ani2");
        let ani3 = document.getElementById("ani3");
        let ani4 = document.getElementById("ani4");
        let ani5 = document.getElementById("ani5");
        let ani51 = document.getElementById("ani51");
        let ani52 = document.getElementById("ani52");
        let ani53 = document.getElementById("ani53");
        let ani54 = document.getElementById("ani54");

        let ani6 = document.getElementById("ani6");
        let ani7 = document.getElementById("ani7");

        let ani8 = document.getElementById("ani8");
        let ani82 = document.getElementById("ani82");
        let ani83 = document.getElementById("ani83");
        let ani84 = document.getElementById("ani84");
        let ani85 = document.getElementById("ani85");
        let ani86 = document.getElementById("ani86");
        let ani87 = document.getElementById("ani87");
        let ani88 = document.getElementById("ani88");

        let ani9 = document.getElementById("ani9");
        let ani10 = document.getElementById("ani10");

        let slogan = document.getElementById("slogan");

        myVid.autoplay = true;
        myVid.controls = false;

        // 视频播放完成
        $(myVid).bind("ended", function() {
          $(myVid).fadeOut();

          // 第2部分
          $(skSlogan).show();
          $(ani1).addClass("ani1Active");
          $(ani2).addClass("ani2Active");
          $(ani3).addClass("ani3Active");
          $(ani4).addClass("ani4Active");
          $(ani5).addClass("ani5Active");
          $(ani51).addClass("ani51Active");
          $(ani52).addClass("ani52Active");
          $(ani53).addClass("ani53Active");
          $(ani54).addClass("ani54Active");

          $(ani6).addClass("ani6Active");
          $(ani7).addClass("ani7Active");

          $(ani8).addClass("ani8Active");
          $(ani82).addClass("ani82Active");
          $(ani83).addClass("ani83Active");
          $(ani84).addClass("ani84Active");
          $(ani85).addClass("ani85Active");
          $(ani86).addClass("ani86Active");
          $(ani87).addClass("ani87Active");
          $(ani88).addClass("ani88Active");

          $(ani9).addClass("ani9Active");
          $(ani10).addClass("ani10Active");

          $(slogan).addClass("sloganActive");

          proxyData.updateStyle();
          let type = proxyData.type;
          // 第3部分

          /**
           * 需要第三个画面的时候
           */
          // let timer = setTimeout(function() {
          //   $(skSlogan).fadeOut();
          //   // $(aniThree).show();
          //   $(logoLeft).addClass("logoLeftAni");
          //   $(logoRight).addClass("logoRightAni");
          //   $(line).addClass("lineAni");
          //   $(text).addClass("lineAni");
          //   clearTimeout(timer);
          //   let time2 = setTimeout(() => {
          //     clearTimeout(time2);
          //     console.log("/weather" + "?type=" + type);
          //     router.push({
          //       path: "/weather",
          //       query: { type: proxyData.type },
          //     });
          //   }, 30000);
          // }, 30000);

          /**
           * 删除第三部分的时候用此代码
           */
          // let time2 = setTimeout(() => {
          //   clearTimeout(time2);
          //   console.log("/weather" + "?type=" + type);
          //   router.push({
          //     path: "/weather",
          //     query: { type: proxyData.type },
          //   });
          // }, 30000);
          let timer = setTimeout(function () {
            $(skSlogan).fadeOut();
            $(aniThree).show();
            $(aniThree).addClass("aniThreeActive");
            $(aniThree5).addClass("aniThreeActive5");
            $(aniThree6).addClass("aniThreeActive6");
            // $(logoLeft).addClass("logoLeftAni");
            // $(logoRight).addClass("logoRightAni");
            // $(line).addClass("lineAni");
            // $(text).addClass("lineAni");
            clearTimeout(timer);
            let time2 = setTimeout(() => {
              clearTimeout(time2);
              router.push({
                path: "/weather",
                query: { type: proxyData.type },
              });
            }, 30000);
          }, 15000);
        });
      },
      // 动态修改样式
      updateStyle() {
        let ani1 = document.getElementById("ani1");
        let ani2 = document.getElementById("ani2");
        if (ani1 && ani2) {
          ani2.style.top = ani1.offsetHeight - ani1.offsetHeight * 0.014 + "px";
        }
        // let line = document.getElementById("line");
        // let text = document.getElementById("text");
        // line.style.height = logoLeft.offsetHeight + "px";
        // text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + "px";
      },
      // 窗口变化的时候调整适配
      winChange() {
        window.addEventListener(
          "resize",
          function() {
            proxyData.updateStyle();
          },
          false
        );
      },
    });
    onBeforeUnmount(() => {});
    onMounted(() => {
      let type = route.query.type;
      proxyData.type = type;
      console.log(proxyData.type);
      proxyData.showFalg = true;
      nextTick(() => {
        proxyData.init();
        setTimeout(() => {
          proxyData.updateStyle();
        }, 200);
        proxyData.winChange();
      });
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
}
#video1 {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

/* 第3部分动画 */
.aniThree {
  display: none; 
  width: 100vw;
  height: 100vh;
  position: absolute;
  text-align:center;
}
.aniThreeActive {
  display: block;
}
.aniThree5 {
  opacity: 0;
  padding-left: 100px;
  margin-top: 330px;
  margin-bottom: 60px;
}
.aniThreeActive5 {
  animation: aniThreeActive5 1.5s ease-in-out 0.1s forwards;
}
@keyframes aniThreeActive5 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.aniThree6 {
  opacity: 0;
}
.aniThreeActive6 {
  animation: aniThreeActive6 1.5s ease-in-out 0.9s forwards;
}
@keyframes aniThreeActive6 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.logoLeft {
  top: 20vh;
  position: absolute;
  opacity: 0;
}
.logoLeft img {
  height: 400px;
}
.logoLeftAni {
  opacity: 1;
  animation: logoLeftAni 0.6s ease-in-out forwards;
}

.logoRight {
  top: 20vh;
  position: absolute;
  opacity: 0;
}
.logoRight img {
  height: 400px;
  // width: 26vw;
}
.logoRightAni {
  opacity: 1;
  animation: logoRightAni 0.6s ease-in-out forwards;
}

@keyframes logoLeftAni {
  0% {
    opacity: 0;
    // transform: translate(860px, 0px);
    transform: translate(44.7vw, 0px);
  }
  100% {
    opacity: 1;
    // transform: translate(460px, 0px);
    transform: translate(24vw, 0px);
  }
}

@keyframes logoRightAni {
  0% {
    opacity: 0;
    // transform: translate(860px, 0px);
    transform: translate(44.7vw, 0px);
  }
  100% {
    opacity: 1;
    // transform: translate(1000px, 0px);
    transform: translate(52vw, 0px);
  }
}

.line {
  opacity: 0;
  position: absolute;
  top: 20vh;
  left: 52vw;
  height: 41vh;
  width: 4px;
  background-color: #ccc;
}
.lineAni {
  animation: lineShow 1s forwards;
}
@keyframes lineShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.text {
  opacity: 0;
  position: absolute;
  // height: 18.5vh;
  width: 36.4vw;
  // top: 75vh;
  left: 50%;
  transform: translateX(-50%);
}
.text img {
  // height: 200px;
  width: 100%;
}
.lineAni {
  animation: lineShow 1s forwards;
}

/* 第2部分动画 */
.skSlogan {
  /* display: none; */
  width: 100vw;
  height: 100vh;
  position: absolute;
}
.skSloganActive {
  display: block;
}
/* 天坛左上 */
.ani1 {
  width: 43%;
  opacity: 0;
  top: 0;
  position: absolute;
}
.ani1Active {
  animation: ani1Active 1s ease-in-out 4.7s forwards;
}
@keyframes ani1Active {
  0% {
    opacity: 0;
    /* transform:translate(-700px,-200px) ; */
  }
  100% {
    opacity: 1;
    /* transform:translate(0px,0px) ; */
  }
}

.ani3 {
  opacity: 0;
  // top: 180px;
  // left: 975px;
  width: 29.9%;
  top: 9.25%;
  left: 11.45%;
  position: absolute;
}
.ani3Active {
  animation: ani3Active 1s ease-in-out 4.8s forwards;
}
@keyframes ani3Active {
  0% {
    opacity: 0;
    transform: translate(100px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

.ani2 {
  opacity: 0;
  font-size: 0;
  left: 10.4vw;
  position: absolute;
  .time-top {
    // display: flex;
    // justify-content: space-between;
    span {
      display: inline-block;
      font-size: 34px;
      color: #7e7e82;
      &:nth-child(1) {
        padding-left: 10px;
        margin-right: 8.2vw;
      }
    }
  }
  .time-line {
    margin: 0 auto;
    margin-top: 0.7vh;
    margin-bottom: 0.7vh;
    // width: 440px;
    width: 95%;
    height: 1px;
    background: #cacaca;
  }
  .time-bottom {
    display: inline-block;
    vertical-align: middle;
    font-size: 34px;
    padding-left: 10px;
    color: #7e7e82;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 34px;
      height: 34px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 34px;
      padding-left: 15px;
    }
    .time-right {
      display: inline-block;
      margin-top: -2px;
      vertical-align: middle;
      font-size: 34px;
      padding-left: 20px;
    }
  }
  .time-box {
    padding-top: 0.1vh;
    font-size: 70px;
    font-family: "HarmonyOS Sans TC";
    color: #ff7a00;
    span {
      display: inline-block;
      vertical-align: middle;
      &:nth-child(2) {
        margin-left: 52px;
        margin-right: 52px;
        height: 45px;
        border-left: 1px solid #cacaca;
      }
    }
  }
}
.ani2Active {
  animation: ani2Active 1s ease-in-out 4.8s forwards;
}
@keyframes ani2Active {
  0% {
    opacity: 0;
    transform: translate(-20px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

.ani4 {
  opacity: 0;
  // top: 95px;
  top: 8vh;
  right: 120px;
  width: 138px;
  opacity: 0;
  position: absolute;
}
.ani4Active {
  animation: ani4Active 1s ease-in-out 4.8s forwards;
}
@keyframes ani4Active {
  0% {
    opacity: 0;
    transform: translate(50px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

/* 左上鸽子 */
.ani5 {
  opacity: 0;
  // top: -80px;
  top: -7.4vw;
  // left: 700px;
  left: 36.4vw;
  position: absolute;
}
.ani5Active {
  animation: ani5Active 3s infinite ease-in-out 5s forwards;
}
@keyframes ani5Active {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  40% {
    opacity: 1;
    // transform: translate(-300px, 150px);
    transform: translate(-15.625vw, 13.8vh);
  }
  100% {
    opacity: 1;
    // transform: translate(-800px, 200px);
    transform: translate(-41.67vw, 18.5vh);
  }
}

.ani51 {
  opacity: 0;
  // top: -80px;
  // left: 680px;
  top: -7.4vh;
  left: 680px;
  transform: scale(0.2);
  position: absolute;
}
.ani51Active {
  animation: ani51Active 5s infinite ease-in-out 5s forwards;
}
@keyframes ani51Active {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.2);
  }
  40% {
    opacity: 1;
    transform: translate(-160px, 120px) scale(0.2);
  }
  100% {
    opacity: 1;
    transform: translate(-900px, 80px) scale(0.2);
  }
}
.ani52 {
  opacity: 0;
  top: -80px;
  left: 720px;
  transform: scale(0.5);

  position: absolute;
}
.ani52Active {
  animation: ani52Active 5s infinite ease-in-out 5s forwards;
}
@keyframes ani52Active {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.5);
  }
  40% {
    opacity: 1;
    transform: translate(-210px, 160px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-900px, 160px) scale(0.5);
  }
}
.ani53 {
  opacity: 0;
  top: -80px;
  left: 800px;
  transform: scale(0.6);

  position: absolute;
}
.ani53Active {
  animation: ani53Active 5s infinite ease-in-out 5s forwards;
}
@keyframes ani53Active {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.6);
  }
  40% {
    opacity: 1;
    transform: translate(-240px, 210px) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: translate(-1000px, 170px) scale(0.6);
  }
}

.ani54 {
  opacity: 0;
  transform: scale(0.5);
  top: -80px;
  left: 770px;
  position: absolute;
}
.ani54Active {
  animation: ani54Active 5s infinite ease-in-out 5s forwards;
}
@keyframes ani54Active {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.5);
  }
  40% {
    opacity: 1;
    transform: translate(-150px, 130px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-900px, 100px) scale(0.5);
  }
}

.ani6 {
  opacity: 0;
  top: 500px;
  left: -100px;
  position: absolute;
}
.ani6Active {
  animation: ani6Active 1.4s ease-in-out forwards;
}
@keyframes ani6Active {
  0% {
    opacity: 1;
    transform: translate(-100px, 500px), scale(1.5);

    /* top: 800px;
        left: -500px; */
  }
  10% {
    opacity: 1;
    transform: translate(300px, -460px), scale(2);
    /* top: 100px;
        left: 400px; */
  }
  70% {
    opacity: 1;
    transform: translate(300px, -460px) scale(2);
    /* top: 100px;
        left: 400px; */
  }
  100% {
    opacity: 1;
    transform: translate(-260px, -720px) scale(1);
    /* top: -223px;
        left: -360px; */
  }
}

.ani7 {
  opacity: 0;
  top: 87px;
  left: 159px;
  position: absolute;
}
.ani7Active {
  animation: ani7Active 1s ease-in-out 1.1s forwards;
}
@keyframes ani7Active {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 天坛-完整 */
.ani8 {
  position: absolute;
  opacity: 0;
  width: 100%;
  // width: 100vw;
  top: 0px;
}
.ani8Active {
  animation: ani8Active 5s ease-in-out forwards;
}
@keyframes ani8Active {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: translate(0px, 0px);

    opacity: 1;
  }
  100% {
    transform: translate(-563px, -238px) scale(0.58);
    opacity: 1;
  }
}
.ani82 {
  // top: 60px;
  // top:1vh;
  top: 0;
  position: absolute;
  opacity: 0;
  width: 100%;
  z-index: 99;
}
.ani82Active {
  animation: ani82Active 5s ease-in-out forwards;
}
@keyframes ani82Active {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: translate(0px, 0px);

    opacity: 1;
  }
  90% {
    transform: translate(0px, 0px);

    opacity: 0;
  }
  100% {
    transform: translate(-500px, -200px) scale(0.75);
    opacity: 0;
  }
}
/* 蓝天 */
.ani83 {
  top: 0px;
  left: 0px;
  position: absolute;
  opacity: 0;
  // width: 1920px;
  width: 100%;
}
.ani83Active {
  animation: ani82Active 5s ease-in-out forwards;
}

/* 云0 */
.ani84 {
  top: 26px;
  left: 0;
  position: absolute;
  opacity: 0;
}
.ani84Active {
  animation: ani84Active 4.8s ease-in-out forwards;
}
@keyframes ani84Active {
  0% {
    opacity: 1;
    transform: translate(300px, 0px);
  }
  90% {
    transform: translate(200px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(200px, 0px);
    opacity: 0;
  }
}
/* 鸽子0 */
.ani85 {
  top: 50px;
  left: 1200px;
  position: absolute;
  opacity: 0;
  transform: scale(0.2);
}
.ani85Active {
  animation: ani85Active 4.6s ease-in-out forwards;
}
@keyframes ani85Active {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scale(0.2);
  }
  90% {
    opacity: 1;
    // transform: translate(-30px, 80px) scale(0.2);
    transform: translate(-30px, 7.4vh) scale(0.2);
  }
  100% {
    // transform: translate(-100px, -50px) scale(0.2);
    transform: translate(-100px, -4.6vh) scale(0.2);
    opacity: 0;
  }
}

.ani86 {
  // top: 30px;
  // left: 1280px;
  top: 2.78vh;
  left: 66.67vw;
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}
.ani86Active {
  animation: ani86Active 4.6s ease-in-out forwards;
}
@keyframes ani86Active {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scale(0.5);
  }
  90% {
    opacity: 1;
    // transform: translate(-150px, 180px) scale(0.5);
    transform: translate(-150px, 16.67vh) scale(0.5);
  }
  100% {
    // transform: translate(-540px, -150px) scale(0.5);
    transform: translate(-540px, -13.89vh) scale(0.5);
    opacity: 0;
  }
}

.ani87 {
  // top: 130px;
  // left: 1270px;
  top: 12.04vh;
  left: 66%;
  position: absolute;
  opacity: 0;
  transform: scale(0.7);
}
.ani87Active {
  animation: ani87Active 4.6s ease-in-out forwards;
}
@keyframes ani87Active {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scale(0.7);
  }
  90% {
    opacity: 1;
    // transform: translate(-100px, 150px) scale(0.7);
    transform: translate(-100px, 13.89vh) scale(0.7);
  }
  100% {
    transform: translate(-330px, -4.63vh) scale(0.7);
    opacity: 0;
  }
}
.ani88 {
  // top: 90px;
  // left: 1350px;
  top: 8.34vh;
  left: 70%;
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}
.ani88Active {
  animation: ani88Active 4.6s ease-in-out forwards;
}
@keyframes ani88Active {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scale(0.5);
  }
  90% {
    opacity: 1;
    // transform: translate(-80px, 120px) scale(0.5);
    transform: translate(-80px, 11.1vh) scale(0.5);
  }
  100% {
    transform: translate(-380px, -4.63vh) scale(0.5);
    opacity: 0;
  }
}

/* 蝴蝶飞舞 */
.ani9 {
  position: absolute;
  opacity: 0;
  /* left:0px;
      top: 0px; */
  transform: translate(0, 0) rotate(30deg);
}
.ani9Active {
  animation: ani9Active 5s ease-in-out forwards;
}
@keyframes ani9Active {
  0% {
    opacity: 0;
    /* left:-500px;
        top: 0px; */
    // transform: translate(-600px, 300px) rotate(60deg) scale(1.5);
    transform: translate(-600px, 2.78vh) rotate(60deg) scale(1.5);
  }

  40% {
    opacity: 1;
    /* left:-500px;
        top: 0px; */
    // transform: translate(700px, 100px) rotate(60deg) scale(0.15);
    transform: translate(700px, 9.26vh) rotate(60deg) scale(0.15);
  }
  60% {
    opacity: 1;
    /* left:-500px;
        top: 0px; */
    // transform: translate(700px, -100px) rotate(-50deg) scale(0.15);
    transform: translate(700px, -9.26vh) rotate(-50deg) scale(0.15);
  }
  80% {
    opacity: 1;
    transform: translate(500px, -18.5vh) rotate(-60deg) scale(0.1);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -18.5vh) rotate(-60deg) scale(0.1);
  }
}

.ani10 {
  width: 100vw;
  opacity: 0;
  position: absolute;
}
.ani10Active {
  animation: ani10Active 0.5s ease-in-out 6s forwards;
}
@keyframes ani10Active {
  0% {
    // top: 700px;
    top: 64.8vh;
    left: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    opacity: 1;
  }
}
</style>