纯CSS实现图片淡入淡出轮播图的最简代码

最新推荐文章于 2024-08-02 11:55:24 发布

Ctr C+V全栈工程师

最新推荐文章于 2024-08-02 11:55:24 发布

阅读量3.2k

点赞数 7

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43341064/article/details/111872270

版权

最终效果见：https://v.youku.com/v_show/id_XNTAzMjQ1NjM3Mg==.html
首先说明下：本代码只实现淡入淡出和循环轮播这两个功能，无鼠标悬停、轮播焦点等效果。应该是目前为止纯CSS完美实现这两个功能的最简代码。
具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现图片淡入淡出轮播图的最简代码</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    h2 {
        text-align: center;
        margin-top: 50px;
        color: blueviolet;
    }

    #container {
        width: 1000px;
        height: 500px;
        margin: 40px auto;
        position: relative;
        border-radius: 50px;
        box-shadow: gray 10px 10px 15px;
    }

    #container div {
        width: 1000px;
        height: 500px;
        border-radius: 50px;
        position: absolute;
        background-size: cover;
    }

    #slide1 {
        background-image: url(slide1.png);
        animation: slide1 12s infinite;
    }

    @keyframes slide1 {
        0%, 10% {
            opacity: 1;
        }

        25%, 100% {
            opacity: 0;
        }
    }

    #slide2 {
        background-image: url(slide2.png);
        animation: slide2 12s infinite;
    }

    @keyframes slide2 {
        0%, 35% {
            opacity: 1;
        }

        50%, 100% {
            opacity: 0;
        }
    }

    #slide3 {
        background-image: url(slide3.png);
        animation: slide3 12s infinite;
    }

    @keyframes slide3 {
        0%, 60% {
            opacity: 1;
        }

        75%, 100% {
            opacity: 0;
        }
    }

    #slide4 {
        background-image: url(slide4.png);
        animation: slide4 12s infinite;
    }

    @keyframes slide4 {
        0%, 85% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    #slide5 {
        background-image: url(slide1.png); /*额外添加的最下层图片，应与最上层图片一致，
        这样在animation周期变更时，视觉上能平顺过渡*/
        
    }
</style>

<body>
    <h2>轮&nbsp播&nbsp演&nbsp示</h2>
    <div id="container">
        <div id="slide5"></div><!--书写顺序应与实际播放顺序相反-->
        <div id="slide4"></div>
        <div id="slide3"></div>
        <div id="slide2"></div>
        <div id="slide1"></div> 
    </div>
</body>

</html>

轮播所用的图片见文末，也可以根据个人情况更改代码和图片后自行编号。
代码和语言都是次要，最重要的是逻辑，这个轮播效果得益于我所设计的如下轮播机制：
在这里插入图片描述
每个animation的duration为12秒，其中淡出时长1.8秒，透明度为1的情况下展示时长1.2秒。通过每个周期内上层的逐层淡出，实现轮播效果。
最后这是我第一次写个人技术文章，本人学前端不久，不足之处请多多指教，大家互相学习。
最后再插下图片吧，不知道效果怎么样，一共四张：在这里插入图片描述