css3动画实现最简单的幻灯片效果

最新推荐文章于 2024-08-26 19:16:26 发布

推开世界的门

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量587

点赞数

文章标签：动画幻灯片

本文链接：https://blog.csdn.net/qq_38845858/article/details/90709776

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css3 实现幻灯片效果</title>
    <style type="text/css">
        .slide {
            width: 750px;
            height: 200px;
            animation: loops 3s infinite;
            /*animation:的第一个参数---检索或设置动画的名称，第二个参数--动画持续的时间 第三个参数---循环次数infinite"为无限循环的意思**/

        }

        @keyframes loops { /*动画名称和上面设置的动画名称一样*/
            /*下面是动画过程*/
            /*三秒的时间,在0%，50%，100%无线循环播放下面三张图*/
            0% {
                background: url(https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/17e2352b857f66e9d2948e98dc483bc2.jpg_750x200_2857d0a3.jpg);
            }

            50% {
                background: url(https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg);
            }

            100% {
                background: url(https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/472a476c776c6fd962fcfd6fd75521d5.jpg_750x200_298bac66.jpg);
            }
        }

    </style>
</head>
<body>
<div class="slide"></div>
</body>
</html>