使用vue3.0实现一些动画效果

已于 2023-09-11 11:47:07 修改
阅读量868 收藏 3
点赞数 2
分类专栏： 自定义效果插件 文章标签： 前端 vue.js
于 2023-09-11 11:38:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39207066/article/details/132800102
版权

一，

动画效果：

1，横屏滚动

2，根据横屏滚动的距离，左侧文本缩小放大

3，鼠标悬浮单张图片时根据悬浮位置发生倾斜效果

横屏滚动函数：

 function handlerMouserScroll(event) { //鼠标滑动list横屏滑动效果
        //获取滚轮跨距，兼容获取方式
        let detail = event.wheelDelta || -event.detail || event.wheelDeltaY
        // console.log('detail:'+detail)
        /*反向*/
        let moveForwardStep = -1
        /*正向*/
        let moveBackStep = 1
        let step = 0
        //如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
        step = detail > 0 ? moveForwardStep * 30 : moveBackStep * 30
        // console.log('step:'+step)
        /*覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
        roadMap.value.scrollLeft = roadMap.value.scrollLeft + step
        // console.log('roadMap.value.scrollLeft:'+roadMap.value.scrollLeft)
 
        //平滑值(越小越慢，不能小于等于0)
        let slipNum = 0.8
        //末尾值（越小，则越平稳，越大越仓促）
        let endNum = 1
        /*递减步伐值*/
        let decreasingPaceNum = step
        /*速度*/
        let paceNum=20;
 
        /*效果一*/
        let t1 = setInterval(() => {
          if (Math.abs(decreasingPaceNum) < endNum) {
            clearInterval(t1)
            console.log(roadMap.value.scrollLeft);
            // if(roadMap.value.scrollLeft>350){
            //   goHideTrue.value = true;
            // }else{
            //   goHideTrue.value = false;
            // }
            return
          }
          decreasingPaceNum = decreasingPaceNum * slipNum
          roadMap.value.scrollLeft = roadMap.value.scrollLeft + decreasingPaceNum
          textOpacity.value =1- roadMap.value.scrollLeft/500*0.7;
          textScale.value = 1 - roadMap.value.scrollLeft/500*0.25;
          
        }, paceNum)
      }

其中在这个函数中下面两句代码实现左侧文本的透明度及大小的变化

 textOpacity.value =1- roadMap.value.scrollLeft/500*0.7;

 textScale.value = 1 - roadMap.value.scrollLeft/500*0.25;

抖动效果函数：

 function shake(event) {  //鼠标悬浮抖动效果
        event.stopPropagation();
        let x=0;
        let y=0;
        let width = event.currentTarget.offsetWidth;
        let height =event.currentTarget.offsetHeight;
        if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
          x = event.offsetX;
          y = event.offsetY;
        } else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
          x = event.layerX;
          y = event.layerY;
        }
        if(x<width/2 && y<height/2){
          //左上
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(-5deg) rotateY(5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x<width/2 && y> height/2){
          //左下
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(5deg) rotateY(5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x <width/2 && y == height/2 ){
          //左中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(0deg) rotateY(5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x == width/2 && y<height/2){
          //上中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(-5deg) rotateY(0deg) scale3d(1, 1, 1)"
          },800)
        }else if(x > width/2 && y<height/2){
          //右上
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(-5deg) rotateY(-5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x>width/2 && y==height/2){
          //右中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(0deg) rotateY(-5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x>width/2 && y>height/2){
          // 右下
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(5deg) rotateY(-5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x==width/2 && y>height/2){
          //下中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(5deg) rotateY(0deg) scale3d(1, 1, 1)"
          },800)
        }
        // console.log('width:'+width+'height:'+height+'X:'+x+'Y:'+y);
      }

组件完整代码：

<template>
  <div class="MAP6">
    <img class="p6Bg" src="../../assets/MA/p6Bg.png" alt="">
    <div class="p6Text" :style="{
      opacity:textOpacity,
      transform: 'translate(0,-50%) scale('+textScale+')'
    }">
      <h1>20<br/> 23</h1>
      <p>MILESTONE</p>
    </div>
    <div class="milestone-center-box" ref='roadMap'>
      <div @mousewheel.stop="handlerMouserScroll" @DOMMouseScroll.stop="handlerMouserScroll" ref='roadlist' data-scroll="true" :style="{width:roadlistWidth}" class="wrapper">
        <div v-for="(item, index) in roadMapList.arr" @mousemove.stop="shake" ref="roadItem" class="roadmap-item-box" :key="index">
          <img @click="jump(item.link)" :src="['http://81.69.18.119:8080'+item.image]"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script> 
  // @ is an alias to /src
  import { fetch } from "../../common/http";
  import { showToast } from 'vant';
  import { ref, reactive, onMounted, onUnmounted,watch } from "vue";
  export default {
    name: 'Header',
    setup (props) {
      let roadMapList= reactive({
      arr: []
      })
      let roadMap = ref(null);
      let roadlist = ref(null);
      let roadItem = ref(null);
      let roadlistWidth = ref(0);
      let left = 0;
      // let goHideTrue = ref(false);
      let textOpacity = ref(1);
      let textScale = ref(1);
      function goLeft(e) { //鼠标拖拽list跟随鼠标滑动效果 （效果被弃，该函数可实现拖拽滑动）
        let disX = e.clientX - roadlist.value.offsetLeft;
        roadlist.value.onmousemove = e => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
        
          if(left < 0 && left> -1541){
            //移动当前元素
            roadlist.value.style.left = left + "px";
          }
        };
        roadlist.value.onmouseup = e => {
          //鼠标弹起来的时候不再移动
          roadlist.value.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
          roadlist.value.onmouseup = null;
        };
      }
      function handlerMouserScroll(event) { //鼠标滑动list横屏滑动效果
        //获取滚轮跨距，兼容获取方式
        let detail = event.wheelDelta || -event.detail || event.wheelDeltaY
        // console.log('detail:'+detail)
        /*反向*/
        let moveForwardStep = -1
        /*正向*/
        let moveBackStep = 1
        let step = 0
        //如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
        step = detail > 0 ? moveForwardStep * 30 : moveBackStep * 30
        // console.log('step:'+step)
        /*覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
        roadMap.value.scrollLeft = roadMap.value.scrollLeft + step
        // console.log('roadMap.value.scrollLeft:'+roadMap.value.scrollLeft)
 
        //平滑值(越小越慢，不能小于等于0)
        let slipNum = 0.8
        //末尾值（越小，则越平稳，越大越仓促）
        let endNum = 1
        /*递减步伐值*/
        let decreasingPaceNum = step
        /*速度*/
        let paceNum=20;
 
        /*效果一*/
        let t1 = setInterval(() => {
          if (Math.abs(decreasingPaceNum) < endNum) {
            clearInterval(t1)
            console.log(roadMap.value.scrollLeft);
            // if(roadMap.value.scrollLeft>350){
            //   goHideTrue.value = true;
            // }else{
            //   goHideTrue.value = false;
            // }
            return
          }
          decreasingPaceNum = decreasingPaceNum * slipNum
          roadMap.value.scrollLeft = roadMap.value.scrollLeft + decreasingPaceNum
          textOpacity.value =1- roadMap.value.scrollLeft/500*0.7;
          textScale.value = 1 - roadMap.value.scrollLeft/500*0.25;
          
        }, paceNum)
      }
      function shake(event) {  //鼠标悬浮抖动效果
        event.stopPropagation();
        let x=0;
        let y=0;
        let width = event.currentTarget.offsetWidth;
        let height =event.currentTarget.offsetHeight;
        if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
          x = event.offsetX;
          y = event.offsetY;
        } else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
          x = event.layerX;
          y = event.layerY;
        }
        if(x<width/2 && y<height/2){
          //左上
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(-5deg) rotateY(5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x<width/2 && y> height/2){
          //左下
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(5deg) rotateY(5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x <width/2 && y == height/2 ){
          //左中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(0deg) rotateY(5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x == width/2 && y<height/2){
          //上中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(-5deg) rotateY(0deg) scale3d(1, 1, 1)"
          },800)
        }else if(x > width/2 && y<height/2){
          //右上
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(-5deg) rotateY(-5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x>width/2 && y==height/2){
          //右中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(0deg) rotateY(-5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x>width/2 && y>height/2){
          // 右下
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(5deg) rotateY(-5deg) scale3d(1, 1, 1)"
          },800)
        }else if(x==width/2 && y>height/2){
          //下中
          event.currentTarget.animate({
            transform: "perspective(1000px) rotateX(5deg) rotateY(0deg) scale3d(1, 1, 1)"
          },800)
        }
        // console.log('width:'+width+'height:'+height+'X:'+x+'Y:'+y);
      }
      function getList(){
        fetch("url", {}).then(
        (res) => {
          // console.log(res);
          if(res.code == 200){
           if(window.innerWidth>1600){
            roadlistWidth.value = (406*res.data.length+610)+'px';
           }else{
            roadlistWidth.value = (360*res.data.length+610)+'px';
           }
           roadMapList.arr = res.data;
            // console.log(roadMapList.arr);
          }
        },
        (err) => {
          showToast("网络错误");
        }
      );
      }
      function jump(url){
        if(url){
          window.location.href = url;
        }
      }
      getList();
      // watch(() => props.p6GoLeft, (newP6GoLeft,oldP6GoLeft) => {
      // //监听
      //   if(newP6GoLeft){
      //     // scrollLeft();
      //   }else if(!newP6GoLeft && oldP6GoLeft){
      //     // scrollRight();
      //   }
      // })
     
      return {
        handlerMouserScroll,
        roadMapList,
        roadMap,
        roadlist,
        roadlistWidth,
        roadItem,
        goLeft,
        shake,
        // goHideTrue,
        textOpacity,
        textScale,
        jump
      }
    }
  }
  </script>
  <style>
    @import url("../../assets/font/font.css");
   .MAP6{
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
    overflow: hidden;
  }
  .MAP6 .p6Bg{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .MAP6 .p6Bg img{
    width: 100%;
    height: 100%;
  }
  .MAP6 .p6Text{
    width: 273px;
    height: 416px;
    position: absolute;
    top:50%;
    left:105px;
    transform: translate(0,-50%) scale(1);
    color: #fff;
  }
  .MAP6 .p6Text h1{
    font-size: 192px;
    font-weight: bolder;
    font-style: italic;
    font-family: Montserrat-BlackItalic;
    line-height: 160px;
    margin-left: 40px;
    position: absolute;
    top:0;
  }
  .MAP6 .p6Text p{
    font-size: 56px;
    font-weight: bolder;
    font-family: Montserrat-Black;
    margin-top: 32px;
    position: absolute;
    bottom: 0;
  }
  .milestone-center-box{
    width: 100%; /*no*/
    height: 496px; 
    position: absolute;
    top:50%;
    /* left: 80%; */
    transform: translate(0,-50%);
    overflow: scroll;
    scrollbar-width:none;
    -ms-overflow-style:none;
    display: flex;
    align-items: center;
  }
  ::-webkit-scrollbar{display:none}
  .milestone-center-box .wrapper{
    /* width: 2981px; */
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    padding-left: 610px;/*no*/
  }
  .milestone-center-box .wrapper .roadmap-item-box{
    width: 360px; /*no*/
    /* height: 482px; */
    margin-left: 45px;
    border-radius: 20px;
    will-change: transform;
    transition: all 400ms cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  }
  .milestone-center-box .wrapper .roadmap-item-box:first-child{
    margin-left: 0;
  }
  .milestone-center-box .wrapper .roadmap-item-box img{
    width: 360px; /*no*/
    height: 416px;
    cursor:pointer;
  }
  .goLeftAni {
    animation: goLeftAni 1s linear 1 forwards;
  }
  .goRightAni {
    animation: goRightAni 1s linear 1 forwards;
  }
  .goHideAni {
    animation: goHideAni 1s linear 1 forwards;
  }
  .goHShowAni {
    animation: goHShowAni 1s linear 1 forwards;
  }
  @keyframes goLeftAni {
    0% {
      left: 80%;
    }
    100% {
      left: 50%;
    }
  }
  @keyframes goRightAni {
    0% {
      left: 50%;
    }
    100% {
      left: 80%;
    }
  }
  @keyframes goHideAni {
    0% {
      opacity: 1;
      transform: translate(0,-50%) scale(1);
    }
    100% {
      opacity: 0.3;
      transform: translate(0,-50%) scale(0.75);
    }
  }
  @keyframes goHShowAni {
    0% {
      opacity: 0.3;
      transform: translate(0,-50%) scale(0.75);
    }
    100% {
      opacity: 1;
      transform:translate(0,-50%) scale(1);
    }
  }
  @media (max-height:750px){
    .MAP6 .p6Text{
      height: 418px;
    }
    .milestone-center-box{
      /* width: 1029px; */
      height: 434px;
    }
    .milestone-center-box .wrapper .roadmap-item-box{
      width: 313px;
      height: 418px;
    }
    .milestone-center-box .wrapper .roadmap-item-box img{
      width: 313px;
      height: 418px;
    }
  }
  </style>

二,

动画效果：两边图像根据中间元素的拖拽位置展示

首先左右两张图片元素的定位，

右边图片采用img标签，平铺整个盒子‘mbp4img’,左侧图片以背景图的形式放入div盒子，方便改变左侧盒子的宽度以此实现左侧图片展示部分图像

 <div class="mbp4img">
     <!-- <div class="imgLeft"></div> -->
     <img class="imgRight" src="../../assets/MB/p41.png" alt="">
     <div ref='imgLeft' class="imgLeft"></div>
     <div  @mousedown="goLeft($event)" class="line" ref='line'>
       <div class="round">
         <img class="goleft" @mousedown="prevent(e)" draggable=“false” src="../../assets/MB/goleft.png" alt="">
         <img class="goright" @mousedown="prevent(e)"  draggable=“false” src="../../assets/MB/goright.png" alt="">
       </div>
     </div>
    </div>
.mbp4img{
    display: inline-block;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
    border-radius: 38px;
  }
  .mbp4img .imgLeft{
    width: 50%;
    height: 100%;
    background: url('../../assets/MB/p42.png') no-repeat top left;
    position: absolute;
    top:0;
    left: 0;
  }
  .line{
    width: 4px;
    height:100%;
    background-color: #ff8a00;
    border: 1px solid #a96a1e;
    position: absolute;
    top:0;
    left: 50%;
  }
  .line .round{
    width: 48px;
    height: 48px;
    border-radius: 30px;
    background-color: #0e0d0d;
    border: 6px solid #ff8a00;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .line .round img{
    position: absolute;
    top:50%;
    transform: translate(0,-50%);
  }
  .line .round .goleft{
    left:4px;
  }
  .line .round .goright{
    right:4px;
  }

实现拖拽中间元素改变左边图片展示大小函数：

function goLeft(e) {
      console.log(111111)
      let disX = e.clientX - line.value.offsetLeft;
      document.onmousemove = e => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        if(left >=0 && left <=999){
          //移动当前元素
          line.value.style.left = left + "px";
          imgLeft.value.style.width = left + "px";
          if(left <=20){
            line.value.style.left = 0 + "px";
            imgLeft.value.style.width = 0 + "px";
          }
          if(left >=980){
            line.value.style.left = 998 + "px";
            imgLeft.value.style.width = 998 + "px";
          }
         
        }
        
      };
      document.onmouseup = e => {
        //鼠标弹起来的时候不再移动
        document.onmousemove = null;
        //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
        document.onmouseup = null;
      };
    }

组件完整代码：

<template>
  <div class="MBP4">
    <div class="mbp4Text">
      <h1>UNITY3D MODELING</h1>
      <p>The powerful 3D modeling engine revolutionizes model creation, editing, and publishing on official<br/>
         websites, eliminating the need for expensive industrial software and graphics workstations. </p>
    </div>
    <div class="mbp4img">
     <!-- <div class="imgLeft"></div> -->
     <img class="imgRight" src="../../assets/MB/p41.png" alt="">
     <div ref='imgLeft' class="imgLeft"></div>
     <div  @mousedown="goLeft($event)" class="line" ref='line'>
       <div class="round">
         <img class="goleft" @mousedown="prevent(e)" draggable=“false” src="../../assets/MB/goleft.png" alt="">
         <img class="goright" @mousedown="prevent(e)"  draggable=“false” src="../../assets/MB/goright.png" alt="">
       </div>
     </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from "vue";

export default {
  name: 'MBP4',
  setup () {
    let line = ref(null);
    let imgLeft =ref(null);
    function goLeft(e) {
      console.log(111111)
      let disX = e.clientX - line.value.offsetLeft;
      document.onmousemove = e => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        if(left >=0 && left <=999){
          //移动当前元素
          line.value.style.left = left + "px";
          imgLeft.value.style.width = left + "px";
          if(left <=20){
            line.value.style.left = 0 + "px";
            imgLeft.value.style.width = 0 + "px";
          }
          if(left >=980){
            line.value.style.left = 998 + "px";
            imgLeft.value.style.width = 998 + "px";
          }
         
        }
        
      };
      document.onmouseup = e => {
        //鼠标弹起来的时候不再移动
        document.onmousemove = null;
        //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
        document.onmouseup = null;
      };
    }
     function prevent(ev){
      　var oEvent=ev||event;
　　    if(oEvent.preventDefault){
          oEvent.preventDefault();
        }else{
          oEvent.returnValue=false;
        }
     } 
      
    return {
      goLeft,
      // goRight,
      line,
      imgLeft,
      prevent
    }
  }
}
</script>
<style>
 @import url("../../assets/font/font.css");
 .MBP4{
    width: 100%;
    height: 100%;
    background-color: #000;
    border-top: 1px solid transparent;
    text-align: center;
    overflow: hidden;
  }
  .mbp4Text{
    color: #fff;
    text-align: center;
    margin-top: 6rem;
  }
  .mbp4Text h1{
    font-size: 48px;
    font-weight: bolder;
    font-family: Montserrat-Black;
  }
  .mbp4Text p{
    font-size: 20px;
    line-height: 35px;
    margin-top: 1rem;
    font-family: Montserrat-Medium;
  }
  .mbp4img{
    display: inline-block;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
    border-radius: 38px;
  }
  .mbp4img .imgLeft{
    width: 50%;
    height: 100%;
    background: url('../../assets/MB/p42.png') no-repeat top left;
    position: absolute;
    top:0;
    left: 0;
  }
  .line{
    width: 4px;
    height:100%;
    background-color: #ff8a00;
    border: 1px solid #a96a1e;
    position: absolute;
    top:0;
    left: 50%;
  }
  .line .round{
    width: 48px;
    height: 48px;
    border-radius: 30px;
    background-color: #0e0d0d;
    border: 6px solid #ff8a00;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .line .round img{
    position: absolute;
    top:50%;
    transform: translate(0,-50%);
  }
  .line .round .goleft{
    left:4px;
  }
  .line .round .goright{
    right:4px;
  }
</style>

三,

动画效果：

1，鼠标在两侧元素区域滑动，两侧元素滑动到中心位置，同时中心位置文案缩小隐藏

2，元素到达中心位置后形成前后关系的图片列表，并且向下滑动鼠标，图片逐渐向下隐藏，后一张图片向前来到第一张的位置，隐藏图片添加到列表最后

3，向上滑动鼠标，列表变成两张图片向两侧分开，并逐渐放大显示中间文案

文档结构：默认隐藏中间的图片列表，显示中间文案及左右图片

<div class="MAP7 page7">
        <div class="map7Text" :class="{Map7Zoom1:p7AniGo,Map7Zoom8:!p7AniGo}">
          <h1>NEWS</h1>
          <p>MetaOil is an innovative platform that provides Web3 business<br/>
             solutions for the oil and gas industry on the one hand, and an<br/>
              immersive experience for users on the other, building a new<br/>
               world where the energy industry meets the digital economy</p>
        </div>
        <div class="imgsList" data-scroll="true" v-show='imgsListShow' @mousewheel="scrollBottom" @DOMMouseScroll="scrollBottom">
          <div v-for="(item, index) in Map7list.arr" :style="styles(index)" ref='map7Item' @click='jump(item.link)' :key="key+index">
            <img :src="['http://81.69.18.119:8080'+item.image]" alt="">
            <p>{{item.title}}</p>
          </div>
        </div>
        <div class="left" @mousewheel="RLscroll" @DOMMouseScroll="RLscroll" @click='jump(leftObj.obj.link)' v-show='!imgsListShow' :class="{Map7Zoom2:p7AniGo,Map7Zoom5:!p7AniGo}">
          <img v-if="leftObj.obj" :src="['http://81.69.18.119:8080'+leftObj.obj.image]" alt="">
          <p  v-if="leftObj.obj">{{leftObj.obj.title}}</p>
        </div>
        <div class="right" @mousewheel="RLscroll" @DOMMouseScroll="RLscroll" @click='jump(rightObj.obj.link)' v-show='!imgsListShow' :class="{Map7Zoom3:p7AniGo,Map7Zoom4:!p7AniGo}">
          <img v-if="rightObj.obj" :src="['http://81.69.18.119:8080'+rightObj.obj.image]" alt="">
          <p  v-if="rightObj.obj">{{rightObj.obj.title}}</p>
        </div>
      </div>

实现：首先使用css3动画写出中间文字缩小隐藏，左右图片向中间滑动重叠的效果

.Map7Zoom1 { 
  animation: Map7Zoom1 2s linear 1 forwards;
  }
  @keyframes Map7Zoom1 {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(0);
    }
  }
  .Map7Zoom2 {
  animation: Map7Zoom2 2s linear 1 forwards;
  }
  @keyframes Map7Zoom2 {
    from {
      left:-643px;
      opacity: 1;
      transform: scale(1) translate(0,-50%);
    }
    to {
      left: 237px;
      opacity: 0.9;
      transform: scale(0.95) translate(0,-59%);
    }
  }
  .Map7Zoom3 {
  animation: Map7Zoom3 2s linear 1 forwards;
  }

使用js函数控制动画执行时间，p7AniGo为true时动画执行，左右及中间动画执行结束隐藏之前的左右两端图片显示我们之前隐藏的图片列表

 function RLscroll(event){
          event.stopPropagation();
          let detail = event.wheelDelta || -event.detail || event.wheelDeltaY
          if(detail<0 ){
            p7AniGo.value = true;  
            setTimeout(function(){
              imgsListShow.value =true;

            },2000)
          }
        }

中间图片列表实现鼠标下滑，第一张图片下滑并更新列表的操作

第一张图片下滑之后从图片列表数组中删除（因为dom的渲染机制，数组的最后一个元素在页面最前面所以用pop()，我们获取到图片数组的时候需要先对数组进行翻转，这样数组的最后一位就是原数据的第一位了）,删除之后使用unshift将删除的数据放在数组的第一位，这样是实现了数组的更新

然后更新页面列表元素的key值，实现页面的重新渲染

 Map7list.arr.pop();
 Map7list.arr.unshift(lastItem);
 key.value = key.value + 1;

 function scrollBottom(event){
        //获取滚轮跨距，兼容获取方式
        event.stopPropagation();
        emit('bottomIsShow', { data: false })
          let detail = event.wheelDelta || -event.detail || event.wheelDeltaY
          if(detail>0){
            p7AniGo.value =false;
            imgsListShow.value =false;
          }else if(flag){
            flag = false;
            map7Item.value[Map7list.arr.length-1].animate({
              top: 750 +'px'
            },1000)
            var timer1 = setTimeout(() => {
              clearTimeout(timer1);
              var lastItem =Map7list.arr[Map7list.arr.length-1];
              Map7list.arr.pop();
              Map7list.arr.unshift(lastItem);
              key.value = key.value + 1;
              flag = true
            }, 1000);
          }
        
        }

上完整组件代码：


    <template>
      <div class="MAP7 page7">
        <div class="map7Text" :class="{Map7Zoom1:p7AniGo,Map7Zoom8:!p7AniGo}">
          <h1>NEWS</h1>
          <p>MetaOil is an innovative platform that provides Web3 business<br/>
             solutions for the oil and gas industry on the one hand, and an<br/>
              immersive experience for users on the other, building a new<br/>
               world where the energy industry meets the digital economy</p>
        </div>
        <div class="imgsList" data-scroll="true" v-show='imgsListShow' @mousewheel="scrollBottom" @DOMMouseScroll="scrollBottom">
          <div v-for="(item, index) in Map7list.arr" :style="styles(index)" ref='map7Item' @click='jump(item.link)' :key="key+index">
            <img :src="['http://81.69.18.119:8080'+item.image]" alt="">
            <p>{{item.title}}</p>
          </div>
        </div>
        <div class="left" @mousewheel="RLscroll" @DOMMouseScroll="RLscroll" @click='jump(leftObj.obj.link)' v-show='!imgsListShow' :class="{Map7Zoom2:p7AniGo,Map7Zoom5:!p7AniGo}">
          <img v-if="leftObj.obj" :src="['http://81.69.18.119:8080'+leftObj.obj.image]" alt="">
          <p  v-if="leftObj.obj">{{leftObj.obj.title}}</p>
        </div>
        <div class="right" @mousewheel="RLscroll" @DOMMouseScroll="RLscroll" @click='jump(rightObj.obj.link)' v-show='!imgsListShow' :class="{Map7Zoom3:p7AniGo,Map7Zoom4:!p7AniGo}">
          <img v-if="rightObj.obj" :src="['http://81.69.18.119:8080'+rightObj.obj.image]" alt="">
          <p  v-if="rightObj.obj">{{rightObj.obj.title}}</p>
        </div>
      </div>
    </template>
    <script> 
      // @ is an alias to /src
      import { fetch } from "../../common/http";
      import { showToast } from 'vant';
      import { ref, reactive, onMounted, onUnmounted,watch } from "vue";
      export default {
        name: 'Header',
        // props: {
        //   p7AniGo: Boolean,
        // },
        setup (props, { emit }) {
          let map7Item = ref(null);
          let flag = true;
          let key = ref(0);
          let intervalTimer1;
          let intervalTimer2;
          let scrollBottomIndex = 0;
          let imgsListShow = ref(false);
          let p7AniGo = ref(false)
          let Map7list = reactive({
            arr:[]
          })
          let leftObj = reactive({
            obj:{}
          });
          let rightObj = reactive({
            obj:{}
          })
        // let scrollTopUp = 0;
        function styles(index) {
          let x = Map7list.arr.length-index;
          return { 
            transform: 'translateY('+-x*30+'px) scale('+(1-x*0.05)+')',
            opacity: 1-x*0.05,
          }
        }
        function scrollBottom(event){
        //获取滚轮跨距，兼容获取方式
        event.stopPropagation();
        emit('bottomIsShow', { data: false })
          let detail = event.wheelDelta || -event.detail || event.wheelDeltaY
          if(detail>0){
            p7AniGo.value =false;
            imgsListShow.value =false;
          }else if(flag){
            flag = false;
            map7Item.value[Map7list.arr.length-1].animate({
              top: 750 +'px'
            },1000)
            var timer1 = setTimeout(() => {
              clearTimeout(timer1);
              var lastItem =Map7list.arr[Map7list.arr.length-1];
              Map7list.arr.pop();
              Map7list.arr.unshift(lastItem);
              key.value = key.value + 1;
              flag = true
            }, 1000);
          }
        
        }
        function getProjectList(){
        fetch("url", {}).then(
        (res) => {
          if(res.code == 200){
            Map7list.arr = res.data.reverse(); //翻转数组
            if(Map7list.arr.length>=2){
              leftObj.obj = Map7list.arr[Map7list.arr.length-2];
              rightObj.obj = Map7list.arr[Map7list.arr.length-1];
            }
          }
        },
        (err) => {
          showToast("网络错误");
        }
      );
      }
        function RLscroll(event){
          event.stopPropagation();
          let detail = event.wheelDelta || -event.detail || event.wheelDeltaY
          if(detail<0 ){
            p7AniGo.value = true;
            setTimeout(function(){
              imgsListShow.value =true;
            },2000)
          }
        }
        function jump(url){
          if(url){
            window.location.href = url;
          }
        }
        getProjectList();
          return {
           Map7list,
           map7Item,
           scrollBottom,
           styles,
           key,
           getProjectList,
           leftObj,
           rightObj,
           imgsListShow,
           p7AniGo,
           RLscroll,
           jump,
          }
        }
      }
      </script>
      <style>
        @import url("../../assets/font/font.css");
        .MAP7{
    width: 100%;
    height: 100%;
    background-color: #000;
    border-top:1px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .map7Text{
    color: #fff;
    margin-top: 40px;
    text-align: center;
  }
  .map7Text h1{
    font-size: 56px;
    font-weight: bolder;
    font-family: Montserrat-Black;
  }
  .map7Text p{
    font-size: 20px;
    line-height: 35px;
    margin-top: 80px;
    font-family: Montserrat-Regular;
  }
  .left,.right{
  width: 965px;
  height: 560px;
  position: absolute;
  top:50%;
  /* bottom:40px; */
  transform:scale(1) translate(0,-50%);
  margin-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  cursor:pointer;
  }
  .MAP7 .left{
    left: -643px
  }
  .MAP7 .right{
    right: -643px
  }
  .left img,.right img{
    width: 100%;
    height: 70.114%;
  }
  .left p,.right p{
    width: 100%;
    height: 29.886%;
    background-color: #343434;
    padding-top: 45px;
    padding-left: 40px;
    font-size: 36px;
    color: #fff;
    font-family: Montserrat-Regular;
    margin-top: -5px;
  }
  .imgsList{
    width: 67%;
    height: 560px;
    position: absolute;
    top:200px;
    left: 50%;
    transform: translate( -50%, 0 );
  }
  .imgsList div{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top:0;
    left: 0;
    border-radius: 20px;
    overflow: hidden;
    cursor:pointer;
  }
  .imgsList div img{
    width: 100%;
    height: 70.114%;
  }
  .imgsList div p{
    width: 100%;
    height: 115px;
    background-color: #343434;
    /* padding-top: 45px; */
    padding-left: 40px;
    font-size: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: -5px;
  }
  .imgsList .imgOne{
    opacity: 0.7;
    transform: scale(0.90) translate(0,-75px);
  }
  .imgsList .imgTwo{
    opacity: 0.8;
    transform: scale(0.925) translate(0,-50px);
  }
  .Map7Zoom1 {
  animation: Map7Zoom1 2s linear 1 forwards;
  }
  @keyframes Map7Zoom1 {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(0);
    }
  }
  .Map7Zoom2 {
  animation: Map7Zoom2 2s linear 1 forwards;
  }
  @keyframes Map7Zoom2 {
    from {
      left:-643px;
      opacity: 1;
      transform: scale(1) translate(0,-50%);
    }
    to {
      left: 237px;
      opacity: 0.9;
      transform: scale(0.95) translate(0,-59%);
    }
  }
  .Map7Zoom3 {
  animation: Map7Zoom3 2s linear 1 forwards;
  }
  @keyframes Map7Zoom3 {
    from {
      right: -643px;
    }
    to {
      right: 237px;
    }
  }
  /* .Map7Zoom4 {
  animation: Map7Zoom4 2s linear 1 2s forwards;
  }
  @keyframes Map7Zoom4 {
    from {
      top:187px;
    }
    to {
      top: 750px;
    }
  } */

  .Map7Zoom4 {
  animation: Map7Zoom4 2s linear 1 forwards;
  }
  @keyframes Map7Zoom4 {
    from {
      right: 237px ;
    }
    to {
      right: -643px;
    }
  }
  .Map7Zoom5 {
  animation: Map7Zoom5 2s linear 1 forwards;
  }
  @keyframes Map7Zoom5 {
    from {
      left: 237px;
      opacity: 0.9;
      transform: scale(0.95) translate(0,-59%);
    }
    to {
      left:-643px;
      opacity: 1;
      transform: scale(1) translate(0,-50%);
    }
  }
  .Map7Zoom8 {
  animation: Map7Zoom8 2s linear 1 forwards;
  }
  @keyframes Map7Zoom8 {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
      </style>

4,

动画效果：向下滑动鼠标，外圈正向旋转，内里图标反向旋转，向上滑动鼠标，大圈反向旋转，内里小图标正向旋转

先上文档结构：

<div class="leftImg">
        <div class="imgbox" @mousewheel.stop="wheelScrollRotate" @DOMMouseScroll.stop="wheelScrollRotate">
          <div ref="rotateBox" :style = "rotateStyle1.obj" id="rotateBox" class="imgborder">
            <img src="../../assets/MA/p41.png" alt="">
            <img :style = "rotateStyle2.obj" src="../../assets/MA/p42.png" alt="">
            <img :style = "rotateStyle2.obj" src="../../assets/MA/p43.png" alt="">
            <img :style = "rotateStyle2.obj" src="../../assets/MA/p44.png" alt="">
          </div>
          <img class="p4icon" src="../../assets/MA/P4icon.png" alt="">
        </div>
      </div>

 css样式，/*no*/不会默认吧px单位改为rem，因为rem计算后的定位在不同分辨率的屏幕下无法做到准确定位，（因为宽高比的不同，rem针对宽做计算）

.MAP4 .p4Con .leftImg{
    width: 49.72%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .MAP4 .p4Con .leftImg .imgbox{
    width: 467px;/*no*/
    height: 467px;/*no*/
    position: relative;
    margin-left: 12.15%;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder{
    width: 467px;/*no*/
    height: 467px;/*no*/
    position: relative;
    transform:rotate(0deg);
  }
  .MAP4 .p4Con .leftImg .imgbox .p4icon{
    position: absolute;
    /* top:50%;
    left: 50%;
    transform: translate(-52%,-51%); */
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img{
    position: absolute;
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:first-child{
    width: 467px; /*no*/
    height: 467px; /*no*/
    top:0;
    left: 0;
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(2){
    top: 16px; /*no*/
    left: 203px; /*no*/
    transform:rotate(0deg);
    /* transform: translate(-50%,0); */
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(3){
    top: 312px; /*no*/
    right: 48px; /*no*/
    transform:rotate(0deg);
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(4){
    top:315px; /*no*/
    left:51px; /*no*/
    transform:rotate(0deg);
    /* transform: translate(0,-40%); */
  }

js部分

 getDeg计算当前元素以旋转的度数，detail判断鼠标滑动的方向，大于0向上滑动，小于0向下滑动

 let flag = true;
      function wheelScrollRotate(){
        event.stopPropagation();
        let detail = event.wheelDelta || -event.detail || event.wheelDeltaY 
        if(!flag){
          return
        }
        let angle = getDeg();
        // console.log(angle);
        flag = false
        if(detail<0){  //大于0向上，小于0向下
          let degree = 0;
          var timer1 = setInterval(() =>{
            if(degree>=119){
              flag = true
              clearInterval(timer1);
            }
            degree += 1;
            rotateStyle1.obj.transform = `rotate(${angle+degree}deg)`;
            rotateStyle2.obj.transform = `rotate(${-angle-degree}deg)`;
          }, 2);
        }else{
          let degree = 0;
          var timer1 = setInterval(() =>{
            if(degree>=119){
              flag = true
              clearInterval(timer1);
            }
            degree += 1;
            rotateStyle1.obj.transform = `rotate(${angle-degree}deg)`;
            rotateStyle2.obj.transform = `rotate(${-angle+degree}deg)`;
          }, 2);
        }
       
      }
      function getDeg(){
        var el = document.getElementById("rotateBox");
        var st = window.getComputedStyle(el, null);
        var tr = st.getPropertyValue("-webkit-transform") ||
          st.getPropertyValue("-moz-transform") ||
          st.getPropertyValue("-ms-transform") ||
          st.getPropertyValue("-o-transform") ||
          st.getPropertyValue("transform") ||
           "FAIL";
      var values = tr.split('(')[1].split(')')[0].split(',');
      var a = values[0];
      var b = values[1];
      var c = values[2];
      var d = values[3];
      var scale = Math.sqrt(a * a + b * b);
      var sin = b / scale;
      var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
      return angle
      }

完整的组件代码：

<template>
  <div class="MAP4">
    <img class="Map4Bg" src="../../assets/MA/p4bg.png" alt="">
    <div class="p4Con">
      <div class="leftImg">
        <div class="imgbox" @mousewheel.stop="wheelScrollRotate" @DOMMouseScroll.stop="wheelScrollRotate">
          <div ref="rotateBox" :style = "rotateStyle1.obj" id="rotateBox" class="imgborder">
            <img src="../../assets/MA/p41.png" alt="">
            <img :style = "rotateStyle2.obj" src="../../assets/MA/p42.png" alt="">
            <img :style = "rotateStyle2.obj" src="../../assets/MA/p43.png" alt="">
            <img :style = "rotateStyle2.obj" src="../../assets/MA/p44.png" alt="">
          </div>
          <img class="p4icon" src="../../assets/MA/P4icon.png" alt="">
        </div>
      </div>
      <div class="rightText">
        <h1>CARBON TRADING</h1>
        <p>
          MetaOil will use blockchain technology to establish a<br/>
          carbon trading platform, convert carbon emissions of<br/>
          oil and gas companies into tradable carbon credits,<br/>
          and provide them with offsets and trading services.
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  // @ is an alias to /src
  import { ref, reactive, onMounted, onUnmounted } from "vue";
  export default {
    name: 'Header',
    props: {
      p4GoUp: Boolean,
    },
    setup(){
      let rotateStyle1 = reactive({
        obj: {
          transform: 'rotate(0deg)',
        }
      })
      let rotateStyle2 = reactive({
        obj: {
          transform: 'rotate(0deg)',
        }
      })
      let flag = true;
      function wheelScrollRotate(){
        event.stopPropagation();
        let detail = event.wheelDelta || -event.detail || event.wheelDeltaY 
        if(!flag){
          return
        }
        let angle = getDeg();
        // console.log(angle);
        flag = false
        if(detail<0){  //大于0向上，小于0向下
          let degree = 0;
          var timer1 = setInterval(() =>{
            if(degree>=119){
              flag = true
              clearInterval(timer1);
            }
            degree += 1;
            rotateStyle1.obj.transform = `rotate(${angle+degree}deg)`;
            rotateStyle2.obj.transform = `rotate(${-angle-degree}deg)`;
          }, 2);
        }else{
          let degree = 0;
          var timer1 = setInterval(() =>{
            if(degree>=119){
              flag = true
              clearInterval(timer1);
            }
            degree += 1;
            rotateStyle1.obj.transform = `rotate(${angle-degree}deg)`;
            rotateStyle2.obj.transform = `rotate(${-angle+degree}deg)`;
          }, 2);
        }
       
      }
      function getDeg(){
        var el = document.getElementById("rotateBox");
        var st = window.getComputedStyle(el, null);
        var tr = st.getPropertyValue("-webkit-transform") ||
          st.getPropertyValue("-moz-transform") ||
          st.getPropertyValue("-ms-transform") ||
          st.getPropertyValue("-o-transform") ||
          st.getPropertyValue("transform") ||
           "FAIL";
      var values = tr.split('(')[1].split(')')[0].split(',');
      var a = values[0];
      var b = values[1];
      var c = values[2];
      var d = values[3];
      var scale = Math.sqrt(a * a + b * b);
      var sin = b / scale;
      var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
      return angle
      }
      return{
        wheelScrollRotate,
        rotateStyle1,
        rotateStyle2
       
        
      }
    }
  }
  </script>
  <style>
     @import url("../../assets/font/font.css");
    .MAP4{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
  }
  .MAP4 .Map4Bg{
    width: 100%;
    height: 100%;
  }
  .MAP4 .Map4Bg img{
    width: 100%;
    /* height: 100%; */
  }
  .MAP4 .p4Con{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    display: flex;
    align-items: center;
  }
  .MAP4 .p4Con .leftImg{
    width: 49.72%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .MAP4 .p4Con .leftImg .imgbox{
    width: 467px;/*no*/
    height: 467px;/*no*/
    position: relative;
    margin-left: 12.15%;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder{
    width: 467px;/*no*/
    height: 467px;/*no*/
    position: relative;
    transform:rotate(0deg);
  }
  .MAP4 .p4Con .leftImg .imgbox .p4icon{
    position: absolute;
    /* top:50%;
    left: 50%;
    transform: translate(-52%,-51%); */
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img{
    position: absolute;
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:first-child{
    width: 467px; /*no*/
    height: 467px; /*no*/
    top:0;
    left: 0;
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(2){
    top: 16px; /*no*/
    left: 203px; /*no*/
    transform:rotate(0deg);
    /* transform: translate(-50%,0); */
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(3){
    top: 312px; /*no*/
    right: 48px; /*no*/
    transform:rotate(0deg);
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(4){
    top:315px; /*no*/
    left:51px; /*no*/
    transform:rotate(0deg);
    /* transform: translate(0,-40%); */
  }
  .MAP4 .p4Con .rightText{
    width: 724px;
    color: #fff;
    text-align: left;
    margin-top: 80px;
  }
  .MAP4 .p4Con .rightText h1{
    font-size: 56px;
    font-weight: bolder;
    font-family: Montserrat-Black;
  }
  .MAP4 .p4Con .rightText p{
    font-size: 20px;
    margin-top: 67px;
    line-height: 40px;
    font-family: Montserrat-Medium;
  }
  @media (min-width:2880px){
    .MAP4 .p4Con .leftImg .imgbox{
    width: 934px;/*no*/
    height: 934px;/*no*/
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder{
    width: 934px;/*no*/
    height: 934px;/*no*/
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:first-child{
    width: 934px; /*no*/
    height: 934px; /*no*/
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(2){
    top: 32px; /*no*/
    left: 406px; /*no*/
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(3){
    top: 624px; /*no*/
    right: 96px; /*no*/
    transform:rotate(0deg);
  }
  .MAP4 .p4Con .leftImg .imgbox .imgborder img:nth-child(4){
    top:750px; /*no*/
    left:750px; /*no*/
    transform:rotate(0deg);
    /* transform: translate(0,-40%); */
  }
  }
  </style>

5,

纯纯的css3动画，元素的浮动，背景图和眼睛图的放大效果

眼镜图的放大效果，之所以用背景图，因为发现img标签在vue3.0的项目下无法放大到超出屏幕宽高

.MB1ani {
  animation: MB1ani 1.5s linear 1 forwards;
  }
  @keyframes MB1ani {
    0% {
      background-size: 1440px 900px;
      background-position:50% 30%;
    }
    100% {
      background-size: 4320px 5400px;
      background-position:50% 28%;
      display: none;
    }
  }

蓝色背景图的放大

.MB1Animation2 {
  animation: MB1Animation2 0.3s linear 1 forwards;
  }
  @keyframes MB1Animation2 {
    0% {
      width: 1008px;
      height: 441px;
      top:135px;
      left:216px;
    }
    100% {
      width: 100%;
      height: 100%;
      left:0px;
      top:55px;
    }
  }

文字的向上效果

.MB1Animation4 {
  animation: MB1Animation4 1s linear 1 forwards;
  }
  @keyframes MB1Animation4 {
    0% {
      top: 464px;
    }
    100% {
      top: -200px;
    }
  }

元素的悬浮效果

.MB1Animation5 {
  animation: MB1Animation5 2.5s linear infinite;
  }
  @keyframes MB1Animation5 {
    0% {
      top: 155px;
      left: 140px;
    }
    50% {
      top: 163px;
      left: 155px;
    }
    100% {
      top: 155px;
      left: 140px;
    }
  }

完整组件代码：

<template>
  <div class="MBP1">
    <div class="MBP1Box ">
      <img src="../../assets/MB/MBP1bg.png" alt="" class="MBP1bg" :class="{MB1Animation2:p1animation}">
      <div class="yanjing" :class="{MB1ani:p1animation}"></div>
    </div>
    <div class="suspension">

      <img :class="{MB1Animation5:!p1animation,MB1Animation9:p1animation}" src="../../assets/MB/mbp11.png" alt="">
      <img :class="{MB1Animation6:!p1animation,MB1Animation10:p1animation}" src="../../assets/MB/mbp12.png" alt="">
      <img :class="{MB1Animation7:!p1animation,MB1Animation11:p1animation}" src="../../assets/MB/mbp13.png" alt="">
      <img :class="{MB1Animation8:!p1animation,MB1Animation12:p1animation}" src="../../assets/MB/mbp14.png" alt="">
    </div>
    <div class="MBP1text" :class="{MB1Animation4:p1animation}">
      <h1>SOLUTIONS & SERVICES</h1>
      <P>MetaOil will provide various solutions and services to oil and gas companies, <br/>
      including technical applications such as VR/AR, NFT, GameFi, carbon credit trading <br/>
      and blockchain, as well as training and consulting services.</P>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'MBP1',
  props: {
    p1animation: Boolean
  },
}
</script>
<style>
  @import url("../../assets/font/font.css");
 .MBP1{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
  }
  .MBP1Box{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }
  .MBP1bg{
    width: 1008px;
    height: 441px;
    position: absolute;
    top:55px;
    left:216px;
  }
  .yanjing{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:0px;
    background: url(../../assets/MB/yanjing.png) no-repeat;
    background-position:50% 38%;
    background-size: 100% 100%;
  }
  .suspension{
    width: 100%;
    height: 900px;
    position: absolute;
    top:0;
    left: 0;
  }
  .suspension img:first-child{
    position: absolute;
    top: 155px;
    left: 140px;
  }
  .suspension img:nth-child(2){
    position: absolute;
    top: 172px;
    right: 80px;
  }
  .suspension img:nth-child(3){
    position: absolute;
    left: 127px;
    bottom: 240px;
  }
  .suspension img:nth-child(4){
    position: absolute;
    right:182px ;
    bottom: 368px;
  }
  .MBP1text{
    width: 100%;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 464px;
  }
  .MBP1text h1{
    font-size: 56px;
    font-weight: bolder;
    font-family: Montserrat-Black;
  }
  .MBP1text p{
    font-size: 20px;
    margin-top: 20px;
    line-height: 40px;
    font-family: Montserrat-Medium;
  }
  .MB1ani {
  animation: MB1ani 1.5s linear 1 forwards;
  }
  @keyframes MB1ani {
    0% {
      background-size: 1440px 900px;
      background-position:50% 30%;
    }
    100% {
      background-size: 4320px 5400px;
      background-position:50% 28%;
      display: none;
    }
  }
  .MB1Animation2 {
  animation: MB1Animation2 0.3s linear 1 forwards;
  }
  @keyframes MB1Animation2 {
    0% {
      width: 1008px;
      height: 441px;
      top:135px;
      left:216px;
    }
    100% {
      width: 100%;
      height: 100%;
      left:0px;
      top:55px;
    }
  }
  .MB1Animation4 {
  animation: MB1Animation4 1s linear 1 forwards;
  }
  @keyframes MB1Animation4 {
    0% {
      top: 464px;
    }
    100% {
      top: -200px;
    }
  }
  .MB1Animation5 {
  animation: MB1Animation5 2.5s linear infinite;
  }
  @keyframes MB1Animation5 {
    0% {
      top: 155px;
      left: 140px;
    }
    50% {
      top: 163px;
      left: 155px;
    }
    100% {
      top: 155px;
      left: 140px;
    }
  }
  .MB1Animation6 {
  animation: MB1Animation6 2.5s linear infinite;
  }
  @keyframes MB1Animation6 {
    0% {
      top: 172px;
      right: 80px;
    }
    50% {
      top: 185px;
      right: 95px;
    }
    100% {
      top: 172px;
      right: 80px;
    }
  }
  .MB1Animation7 {
  animation: MB1Animation7 2.5s linear infinite;
  }
  @keyframes MB1Animation7 {
    0% {
      left: 127px;
      bottom: 240px;
    }
    50% {
      left: 135px;
      bottom: 255px;
    }
    100% {
      left: 127px;
      bottom: 240px;
    }
  }
  .MB1Animation8 {
  animation: MB1Animation8 2.5s linear infinite;
  }
  @keyframes MB1Animation8 {
    0% {
      right:182px ;
      bottom: 368px;
    }
    50% {
      right:190px ;
      bottom: 383px;
    }
    100% {
      right:182px ;
      bottom: 368px;
    }
  }

  .MB1Animation9 {
  animation: MB1Animation9 2s linear 1 forwards;
  }
  @keyframes MB1Animation9 {
    0% {
      top: 155px;
      left: 140px;
    }
    100% {
      top: -200px;
      left: -200px;
    }
  }
  .MB1Animation10 {
  animation: MB1Animation10 2s linear 1 forwards;
  }
  @keyframes MB1Animation10 {
    0% {
      top: 172px;
      right: 80px;
    }
    100% {
      top: -152px;
      right: -186px;
    }
  }
  .MB1Animation11 {
  animation: MB1Animation11 2s linear 1 forwards;
  }
  @keyframes MB1Animation11 {
    0% {
      left: 127px;
      bottom: 123px;
    }
    100% {
      left: -166px;
      bottom: -196px;
    }
  }
  .MB1Animation12 {
  animation: MB1Animation12 2s linear 1 forwards;
  }
  @keyframes MB1Animation12 {
    0% {
      right:182px ;
      bottom: 249px;
    }
    100% {
      right:-147px ;
      bottom: -142px;
    }
  }

</style>

捕风的紫色鸢尾
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3过渡动画详解
weixin_47450807的博客
02-11 7466
一、vue中动画简单介绍 在vue中如果一些过程不存在动画效果，则表现出来的结果是比较生硬的。此时我们需要设置动画来使得页面更加灵活。 如上面代码所示，我们的h1只是在消失和显示来回切换，但是这样效果生硬。 此时我们使用transition组件来实现动画效果。 二、vue的transition动画 transition组件可以添加name属性,注意name属性值可以为class样式的第一个字符串。上面例子会在出现和消失会展示出来opacity渐变的情况。 三、transition组件的实现原理 上面的图
vue+animation实现翻页动画
12-28
本文实例为大家分享了vue+animation实现翻页动画展示的具体代码，供大家参考，具体内容如下 前端在做数据展示的时候，可能提留页面时间较长，导致数据不能及时更新，你可以定时更新，也可以做一个假数据 给用户视觉...
vue3使用animate.css实现动画效果！
hubert39641020的博客
07-26 5495
过渡动画httpshttpshttpshttpshttps。
vue鼠标悬停图片放大特效特效代码
03-20
vue鼠标悬停图片放大特效是一款基于vue.js跟css3制作的相册图片悬停弹出3d放大展示代码。
vue3+TS或JS, 实现粒子特效 @tsparticles/vue3
yavlgloss的博客
05-11 729
vue3+ts实现粒子效果
【Vue实战】Vue3动画神操作！教你实现和PPT一样的动画效果！
qq_21609191的博客
12-21 4579
最近写界面的时候，发现一个前端组件很好玩他就是鼎鼎大名的【】← 点 击 跳 转 官 网这篇主要详细介绍 Animate.css 的使用，还有一些简单实用的前端动画制作提示：以下是本篇文章正文内容，下面案例可供参考，部分内容翻译于官网这篇简单教学了如何使用Animate.css的简单功能使用下一篇会延续本篇前端动画实现教学，将会有部分简单@keyframes动画教学也会将本篇代码上传到Github进行公开敬请期待。
玩转Vue3全家桶09丨动画：Vue中如何实现动画效果？
fegus的博客
10-02 2911
今天这一讲的主要内容讲完了，我们来简单复习一下今天学到的知识点。首先我们学习了前端使用 CSS 实现简单动画的 transition 和 animation 两个配置；然后，我们了解到了通过 Vue 3 提供的 traisition 组件，我们可以控制在 Vue 中动画元素进入和离开页面时候的 class；通过制定的命名规范，在 CSS 中设置过渡和动画效果，从而很方便地实现过渡效果，并且丰富了清单应用的弹窗功能；在这之后，我们使用 transition-group 实现列表元素的动画；
Vue3学习之旅-Vue3过渡&动画实现
听雨少年的博客
08-14 2005
Vue3过渡&动画实现 动画 认识动画 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验： React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； 我们来看一个案例： Hello World的显示和隐藏； 通过下面的代码实现，是不会有任何动画效果的； 没有动画的情况下
vue-router实现webApp切换页面动画效果代码
08-30
vue-router 实现 webApp 切换页面动画效果代码 本篇文章主要介绍了使用 Vue ...使用 Vue Router 实现 webApp 页面切换动画效果需要记录页面状态、监听路由变化、使用 transition 元素执行动画效果，并设置路由规则。
纯pc端动画官网，vue3.0写法
最新发布
07-12
纯pc端动画官网，vue3.0写法
vue3.0导入threejs三维模型，实现模型放大，缩小，拖动及其动画效果，鼠标点击规划空间路径。
04-12
在本项目中，我们主要探讨如何在Vue3.0框架中整合Three.js库，以便导入三维模型，并实现模型的缩放、平移、旋转以及添加交互式动画效果，特别是通过鼠标点击来规划空间路径。Three.js是JavaScript的一个强大库，用于...
Vue 3 动画
weixin_48702807的博客
07-23 1806
vue 3 动画
Vue3 – 实现过渡动画
weixin_56663198的博客
07-18 1671
1 认识Vue的动画原理 2 动画中常见类的作用 3 animation动画实现 4 动画的常见属性设置 5 列表元素动画组实现 6 列表元素的移动动画
Vue3 过渡动画效果
xiangxiongfly
06-01 1194
Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画： 会在一个元素或组件进入和离开 DOM 时应用动画。 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。
Vue3 Transition组件给页面切换加动画效果
热门推荐
前端咸鱼翻身的博客
05-05 1万+
使用Vue3自带的Transition组件给页面组件之间切换加过渡效果，主要应用在移动端设备，改善用户的交互体验。
vue实现头像放大效果
qq_51249969的博客
04-11 125
【代码】vue实现头像放大效果。
vue动效：放大缩小与上下移动
weixin_45800869的博客
05-16 2047
笔记
Vue 3.0 过渡&动画概述 【Vue3 从零开始】
2201_75866484的博客
02-28 421
Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。watchers我们将在本指南接下来的三个部分中介绍所有这些以及更多内容。然而，除了提供这些有用的 API 之外，值得一提的是，我们前面介绍的 class 和 style 声明也可以应用于动画和过渡，用于更简单的用例。在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。
Vite+Vue3项目使用第三方Animate.css动画库简单实现页面级的路由转场动画详细教程
薛定谔的猫的博客
09-25 1353
Vite+Vue3项目使用第三方Animate.css动画库简单实现页面级的路由转场动画详细教程
Vue 3.0 实战项目
05-24
3. 社交网络应用程序：这是一个更高级的应用程序，它让你学习如何使用Vue 3.0创建动画和处理用户输入。你可以使用Firebase来处理实时数据，也可以使用第三方库来添加社交功能。 以上是一些适合练习Vue 3.0的实战...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值