背景图片渐变功能

最新推荐文章于 2023-05-11 16:36:28 发布

龙猫爱红猪

最新推荐文章于 2023-05-11 16:36:28 发布

阅读量224

点赞数

文章标签：大数据 vue.js

本文链接：https://blog.csdn.net/weixin_54452932/article/details/125651867

版权

1.纯css写

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>1</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            /* background: red; */
            position: relative;
            animation: mymove 10s infinite;
            -webkit-animation: mymove 10s infinite;
            /* Safari and Chrome */
        }

        @keyframes mymove {
            0% {
                background-image: url("./1.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            25% {
                background-image: url("./2.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            75% {
                background-image: url("./3.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            100% {
                background-image: url("./1.jpg");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

    </style>
</head>

<body>

    <p><strong>注意:</strong> @keyframes不兼容ie9</p>

    <div></div>

</body>

</html>

2.js写

<template>
  <div>
    <ul class="carousel-body">
      <!-- fade 显示那张图片就加fade类名 -->
      <li
        class="carousel-item"
        v-for="(item, i) in list"
        :key="i"
        :class="{ fade: index === i }"
      >
        <img :src="item.img" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      timer: null,
      list: [
        {
          img: require("../assets/logo.png"),
        },
        {
          img: require("../assets/表盘.png"),
        },
        {
          img: require("../assets/logo.png"),
        },
        {
          img: require("../assets/表盘.png"),
        },
      ],
    };
  },
  created() {
    this.autoPlayFn();
  },
  methods: {
    autoPlayFn() {
      this.timer = setInterval(() => {
        this.index++;
        if (this.index >= this.list.length) {
          this.index = 0;
        }
      }, 2000);
    },
  },
};
</script>

<style scoped>
.carousel-body {
  width: 100%;
  height: 100%;
  background: red;
}
.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.fade {
  opacity: 1;
  z-index: 1;
}
</style>