css3渐隐效果

css3渐隐效果

阿里云首页banner效果：

我的实现代码：

<template><div style="position: relative;height: 500px"><img style="height:100%;position: absolute"src=".jpg"/><img class="fade" style="height:100%;position: absolute"src=".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>

实现效果：