前端web轮播图之渐进淡出

轮播图之渐进淡出

css样式

.bg{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-image: url('../../我的设计/image/1.webp');
            background-size: 220vh !important;
            background-repeat: no-repeat !important;
            position: absolute;
            z-index: -1;
            transition: all 1s ease-out;
        }

js部分

html部分

注意与说明：图片素材是网上下载的，是webp格式。为了满足视觉，最好6张图片大小一样，图片命名也是连续的数字，是为了索引到图片，实现轮播切换效果。希望对有需求的小伙伴有帮助~

素材图片.png