前端大屏背景动画效果

1、效果见视频

大屏背景动画效果

附上背景图

 附上标题背景图

 

2、主要css动画样式：

&-bg {
    width: 100%;
    height: calc(100% - 0.98rem);
    overflow: hidden;
    background: url(../assets/images/xz.png) no-repeat 0 0 / cover;
    position: absolute;
    bottom: 0;
    z-index: 1;
    &-mask {
      width: 2500px;
      height: 1600px;
      transform: rotate(-30deg) translateX(-500px) translateY(150px);
      transform-origin: 0 0;
    }
    &-mask1 {
      background-color: rgba(0, 0, 0, 0.7);
      width: 2500px;
      height: 1500px;
      animation: mask1 linear 20s infinite;
    }

    &-mask2 {
      background-color: rgba(0, 0, 0, 0);
      width: 2500px;
      height: 0px;
      animation: mask2 linear 20s infinite;
    }

    @keyframes mask2 {
      0%,
      80% {
        height: 0px;
      }
      95% {
        height: 200px;
      }
      100% {
        height: 0px;
      }
    }

    &-mask3 {
      background-color: rgba(0, 0, 0, 0.7);
      width: 2500px;
      height: 0px;
      animation: mask3 linear 20s infinite;
    }
    @keyframes mask3 {
      0%,
      80% {
        height: 200px;
      }
      100% {
        height: 1500px;
      }
    }
    @keyframes mask1 {
      0%,
      80% {
        height: 1500px;
      }
      100% {
        height: 200px;
      }
    }
  }

3、直接给上整个 .vue 代码，可复制粘贴看效果（上图保存到自己的文件夹，再改一下图片路径即可）

<template>
  <div class="main">
    <div class="main-head">
      <div class="main-head-title">
        <div>实验中心检测动态</div>
      </div>
      <div class="main-head-time">
        <div class="main-head-time-left">{{ date.week }}</div>
        <div class="main-head-time-center">{{ date.time }}</div>
        <div class="main-head-time-right">{{ date.day }}</div>
      </div>
    </div>
    <div class="main-body">
      <div class="box">
      </div>
    </div>
   <div class="main-bg">
        <div class="main-bg-mask">
          <div class="main-bg-mask1"></div>
          <div class="main-bg-mask2"></div>
          <div class="main-bg-mask3"></div>
        </div>
      </div>
  </div>
</template>

<script>
import models from "@/models";

export default {
  name: "DataviewIndex",
  props: {},
  components: {},
  data() {
    return {
      data: [],
      // 时间
      date: {
        week: "",
        time: "",
        day: "",
      },
      // 更新时间定时器
      dateTime: null,
    };
  },
  watch: {},
  methods: {
    // 获取时间
    getDate() {
      this.date.time = models.Day.GetNowTimeWithFormat();
      this.date.day = models.Day.GetNowDateWithFormat();
      this.date.week = models.Day.GetWeek();
    },
  },
  computed: {
    classOption() {
      return {
        step: 0.8, //滚动的速度
        limitMoveNum: 19, //开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, //鼠标悬停，true/false
        direction: 1, //滚动的方向，0向下 1向上 2向左 3向右
        openWatch: true, //开启数据实时监控刷新dom，true/false
        singleHeight: 0, //滚动多少高度停留一次
        singleWidth: 0, //无缝不停止的滚动
        waitTime: 1000, //单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {},
  mounted() {
    // 获取时间并每隔一秒获取一次
    this.dateTime = setInterval(() => {
      this.getDate();
    }, 1000);
  },
  

  destroyed() {
    clearInterval(this.dateTime);
  },
};
</script> 

<style scoped lang='scss'>
.main {
  width: 100%;
  height: 100%;
  background-color: #010a12;
  &-head {
    height: 0.98rem;
    background-image: url("@/assets/images/img-bg-view-title.png");
    background-size: 100% 100%;
    &-title {
      height: 0.65rem;
      display: flex;
      justify-content: center;
      & > div {
        width: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.26rem;
        color: #f7f5f9;
        letter-spacing: 5px;
      }
    }
    &-time {
      height: calc(100% - 0.65rem);
      color: #f7f5f9;
      font-size: 0.16rem;
      position: relative;
      &-left {
        position: absolute;
        top: -0.04rem;
        left: 6.2rem;
      }
      &-center {
        position: absolute;
        top: 0.05rem;
        left: 9.3rem;
      }
      &-right {
        position: absolute;
        top: -0.04rem;
        left: 12.3rem;
      }
    }
  }
  &-body {
    height: calc(100% - 0.98rem);
  }
  &-bg {
    width: 100%;
    height: calc(100% - 0.98rem);
    overflow: hidden;
    background: url(../assets/images/xz.png) no-repeat 0 0 / cover;
    position: absolute;
    bottom: 0;
    z-index: 1;
    &-mask {
      width: 2500px;
      height: 1600px;
      transform: rotate(-30deg) translateX(-500px) translateY(150px);
      transform-origin: 0 0;
    }
    &-mask1 {
      background-color: rgba(0, 0, 0, 0.7);
      width: 2500px;
      height: 1500px;
      animation: mask1 linear 20s infinite;
    }

    &-mask2 {
      background-color: rgba(0, 0, 0, 0);
      width: 2500px;
      height: 0px;
      animation: mask2 linear 20s infinite;
    }

    @keyframes mask2 {
      0%,
      80% {
        height: 0px;
      }
      95% {
        height: 200px;
      }
      100% {
        height: 0px;
      }
    }

    &-mask3 {
      background-color: rgba(0, 0, 0, 0.7);
      width: 2500px;
      height: 0px;
      animation: mask3 linear 20s infinite;
    }
    @keyframes mask3 {
      0%,
      80% {
        height: 200px;
      }
      100% {
        height: 1500px;
      }
    }
    @keyframes mask1 {
      0%,
      80% {
        height: 1500px;
      }
      100% {
        height: 200px;
      }
    }
  }
}
</style>