实现淡入淡出缩放轮播图效果

问题描述

最近项目中要求实现淡入淡出并且还要有缩放效果，在此记录下代码

代码实现：

html:

    <div id="app">
        <div id="main" :style="{'animation-duration': imgs.length*seconds+'s'}">
            <template v-for="(img, index) in imgs">
                <img :style="{'animation-duration': imgs.length*seconds+'s', 'animation-delay': index*seconds+'s'}" :src="img" :key="index"/>
            </template>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="index.js"></script>

css:

html,body { margin: 0; padding: 0;}
#app {
    width: 100vw;
    height: 100vh;
}
#main {
    position: relative;
    width: 100%;
    height: 100%;
}

#main {
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: mainAnimation;
}

img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0;
    z-index: 0;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: imageAnimation;
}
 

@keyframes mainAnimation { 
    0% {
        transform: scale(1) ;
	}
	20% {
	    transform: scale(1.8) ;
	}
    50% {
	    transform: scale(1) ;
	}
    100% { transform: scale(1.8)  }
	100% { transform: scale(1.8)  }
}

@keyframes imageAnimation { 
    0% { opacity: 0.1; }
    8% {
	    opacity: 1;
	}
	20% {
	    opacity: 1;
	}
	30% {
	    opacity: 0.1;
	}
    100% { opacity: 0.1 }
}

vue

new Vue({
    el: "#app",
    data: function() {
        return {
            seconds: 10,
            imgs: ['./img/1.webp', './img/2.webp', './img/3.webp', './img/4.webp']
        }
    },
    mounted: function() {}
})