HTML+CSS实现一个淡显淡隐轮播图

bodyHealthy

已于 2022-11-12 00:02:30 修改

阅读量1.1k

点赞数 5

分类专栏： CSS 文章标签：前端 html css 动画 css3

于 2022-11-12 00:01:37 首次发布

本文链接：https://blog.csdn.net/hao_13/article/details/127723512

版权

CSS 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

效果展示

主要思路及一点说明

代码：

效果展示

淡显淡隐背景轮播图

主要思路及一点说明

这里我定义了一个动画 slowly-show 来完成主要的功能。五张图片轮播，一个周期设置为25秒，则每张图片在一个周期中展现的时间有5秒。

主要的思想是：各个图片依次显现，下一张图片开始显现时，当前的图片开始淡出。淡出时需要细心处理 opacity 和 z-index 。第一张图片默认一开始就要展示了，层级自然是最高的，这里给他 z-index = 5，再从 opacity = 0 开始，在一个比较短的时间内（尽可能多地小于 5s，这里为0%~5%，即0.05 * 25 = 1.25s）到达 opacity = 1。因为每一张的图片在一个周期内展示的时间为5s，下一个图片的动画需要延迟 5s ，即要等本周期内排在前面的所有图片都展示完了，再开始。第三张图片的动画则需要延迟10s，以此类推。等一段时间过后，当前的图片开始淡出，先是要降低 opacity 的值，此时 z-index 还不能这么快改变，因为下一张图片在开始时的层次为 5 ，opacity 从 0 到 1 淡显，确保下一张即将要展示的图片的层级和当前已完成展示即将退出的图片的层级相同，这样根据两张图片的透明度的变化，一个变透明，一个变清晰，如此两张图片在切换的时候才有一个交汇的过程，这样的 ‘过渡’ 效果才不会这么突兀。往后的切换大致也是如此了。

在该动画中，0%~5% 是图片显现期，5%~20% 是图片的完全展示期，20%~25% 是当前图片淡出，下一张图片显现的交汇期，25%~100% 是该图片等待下一个轮播周期的时间。

没有添加事件之类的来手动控制切换，不过可以用作页面的全屏轮播背景。

代码：

html：


<body>
    <div class="outest">    
        <img class="img-1" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg31.51tietu.net%2Fpic%2F2016-121012%2F20161210124512g03ealme4ja1402.jpg&refer=http%3A%2F%2Fimg31.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=1e9907edc0e865d925c65c3e70459375">
        <img class="img-2" src="https://img2.baidu.com/it/u=477419428,1990338264&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
        <img class="img-3" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploadfile.bizhizu.cn%2Fup%2Fae%2F13%2F1d%2Fae131dddc61533a0116bd3b411226190.jpg.source.jpg&refer=http%3A%2F%2Fuploadfile.bizhizu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=606abdf4fb3259de5056d1b02a62105d">
        <img class="img-4" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090922%2Fozgtdpuqr1iozgtdpuqr1i.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=a873a24385bad6ca2b7b96cbdd4d2fe6">
        <img class="img-5" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F533e6929e5014.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670064258&t=0b5cd61eae2c76104de6b085540ff3d3">
    </div>
</body>

css:

    <style type="text/css">
        body,html{
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .outest{
            width: 100vw;
            height: 100vh;
            position: relation;
        }
        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
        }
        .img-1{
            animation: slowly-show 25s linear 0s infinite both;
        }
        .img-2{
            animation: slowly-show 25s linear 5s infinite both;
        }
        .img-3{
            animation: slowly-show 25s linear 10s infinite both;
        }
        .img-4{
            animation: slowly-show 25s linear 15s infinite both;
        }
        .img-5{
            animation: slowly-show 25s linear 20s infinite both;
        }
        @keyframes slowly-show {
            0%{
                opacity: 0;
                z-index: 5;
            }5%,20%{
                opacity: 1;
                z-index: 5;
            }25%{
                opacity: 0;
                z-index: 5;
            }100%{
                opacity: 0;
                z-index: 1;
            }
        }
    </style>