网页制作（用keyframes关键帧）实现轮播图原代码

最新推荐文章于 2023-04-06 20:31:33 发布

Pink&Sakura

最新推荐文章于 2023-04-06 20:31:33 发布

阅读量875

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/galaxyrt/article/details/117388956

版权

Web前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
        padding:0;
        margin:0;
    }
    #box{
        width:375px;
        /* 宽度是图片的宽度 */
        height:500px;
        /* 图片的高度 */
        margin:50px auto 0;
        overflow: hidden;
        /* 将图片隐藏 */
    }
    ul{
        width:4000px;
        animation: changeImg 6s ease-in-out infinite;  
        /* 调用动画 */
    }
    ul li{
        float:left;
        list-style:none;
    }
    /* 定义动画 */
    @keyframes changeImg{
        0%{
            transform:translateX(0);
            }
        30%{
            transform:translateX(0);
            }
        33%{
            transform:translateX(-375px);
        }
        63%{
            transform:translateX(-375px);
        }
        65%{
            transform:translateX(-750px);
            /* 两张图片的宽度 */
        }
        95%{
            transform:translateX(-750px);
        }
        100%{
            transform:translateX(-1225px);
            /*三张图片的宽度 最后一张图片和第一张图片一样出现 */
        }
    }

    </style>
</head>
<body>
    <div  id="box">
        <ul>
            <li><img src="images/z1.gif" alt=""></li>
            <li><img src="images/z2.gif" alt=""></li>
            <li><img src="images/z3.gif" alt=""></li>
            <li><img src="images/z1.gif" alt=""></li>
        </ul>
    </div>
</body>
</html>

需要注意的是实现轮播图的图片像素大小需要一致不然效果不好，可以使用ps或者pr来剪辑图片

代码是本人亲自敲打，可以直接复制粘贴使用。