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

目录

效果展示

主要思路及一点说明

代码:


效果展示

淡显淡隐背景轮播图

主要思路及一点说明

        这里我定义了一个动画 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bodyHealthy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值