阿里云首页banner效果:
我的实现代码:
<template>
<div style="position: relative;height: 500px">
<img style="height:100%;position: absolute"
src="https://img.alicdn.com/tfs/TB1JoiEMVYqK1RjSZLeXXbXppXa-3840-1280.jpg"/>
<img class="fade" style="height:100%;position: absolute"
src="https://img.alicdn.com/tfs/TB1gkexM6DpK1RjSZFrXXa78VXa-3840-1280.png"/>
</div>
</template>
<script>
export default {
name: "BannerAli"
}
</script>
<style scoped>
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 1; /*中间状态 透明度为1*/
}
100% {
opacity: 0; /*结尾状态 透明度为0*/
}
}
.fade {
-webkit-animation: fadeIn 3s infinite linear;
}
/*.fade {*/
/*transition: opacity 1s ease-in-out;*/
/*}*/
/*.fade:hover {*/
/*opacity: 0;*/
/*filter: alpha(opacity=0);*/
/*}*/
</style>
实现效果: