前端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

你可能感兴趣的:(前端web轮播图之渐进淡出)