纯CSS3实现背景图淡入淡出轮播

最新推荐文章于 2025-07-14 13:31:55 发布

itiatb

最新推荐文章于 2025-07-14 13:31:55 发布

阅读量1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： css3 html5 无js代码

本文链接：https://blog.youkuaiyun.com/weixin_42428741/article/details/81386221

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何仅使用CSS3实现背景图片的淡入淡出效果，无需JavaScript，通过调整图片透明度(opacity)及背景图片URL实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们以纯css3的方式来实现背景图淡入淡出，不设计js代码，首先我们来看一下思路，使用animation方法来实现这个循环的动画效果，淡入淡出效果我们通过设置opacity透明度来实现，最废话不多说，我们直接上代码。

html+css3代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
    .div_img{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0 auto;
        top: 0;
        background: url(images/bg01.webp) ;
        background-repeat: no-repeat;
        background-size:cover ;
        opacity: 1;
        animation: fateimg 100s linear infinite;
    }
    @keyframes fateimg{
        0%{background: url(images/bg01.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        11%{background: url(images/bg01.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        12%{background: url(images/bg01.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        13%{background: url(images/bg02.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        23%{background: url(images/bg02.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        24%{background: url(images/bg02.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        25%{background: url(images/bg03.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        35%{background: url(images/bg03.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        36%{background: url(images/bg03.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        37%{background: url(images/bg04.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        47%{background: url(images/bg04.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        48%{background: url(images/bg04.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        49%{background: url(images/bg05.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        59%{background: url(images/bg05.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        60%{background: url(images/bg05.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        61%{background: url(images/bg06.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        72%{background: url(images/bg06.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        73%{background: url(images/bg06.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        74%{background: url(images/bg07.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        85%{background: url(images/bg07.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        86%{background: url(images/bg07.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        87%{background: url(images/bg08.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        98%{background: url(images/bg08.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
        99%{background: url(images/bg08.webp);opacity: 0;background-repeat: no-repeat;background-size:cover ;}
        100%{background: url(images/bg01.webp);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
    }
        </style>
    </head>
    <body>
        <div class="div_img"></div>
    </body>
</html>