CSS实现简单的--轮播图

电玩女神 2022-12-08 14:08 179阅读 0赞

第一篇还是一点一点的写吧，之前只知道老师只讲了知识点，没有串起来做一个小东西，所以总感觉学的不行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70][]图片的最下面可以看他的大小比例 我们缩小一半给他写进去

width:811px;

height:304px;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70 1][]

当时比较sd，写成这样直接打开发现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70 2][]

才弄了一半！！！

后来还得调整背景大小

不想详细写了，比较简单的

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                /* 容器宽度 */
                width: 811px;
                /* 容器高度 */
                height: 304px;
                /* 背景导入图片 */
                background-image: url(./images/a.webp);
                /* 背景图片大小 */
                background-size: 811px 304px;
    
    
                /* 绑定动画 */
                /* 
                    infinite 无限播放
                 */
                animation: zhuan 5s infinite;
            }
    
            /* 制定动画过程 */
                @keyframes zhuan{
                    20%{
                        background-image: url(./images/a.webp);
                    }
                    33%{
                        background-image: url(./images/b.webp);
                    }
                    53%{
                        background-image: url(./images/b.webp);
                    }
                    66%{
                        background-image: url(./images/c.webp);
                    }
                    86%{
                        background-image: url(./images/c.webp);
                    }
                }
                /* 到百分之一百会默认回到第一张 */
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

关键要看好跳动的百分比分配

效果图如下（这东西还不好上传搞了半天）

![20200919163118551.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70]: /images/20221123/2d0af90088eb4b34b0509c5933fdf03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70 1]: /images/20221123/38e00c671e5c4306b3a408841a96facf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc3ODA0_size_16_color_FFFFFF_t_70 2]: /images/20221123/7ad6123b97db47bb84c7a03a75ec8a71.png
[20200919163118551.gif]: /images/20221123/2e6354c9367544bfb4bce293ec31ef6e.png