CSS3动画实现背景图轮播

605 阅读1分钟

利用css3动画切换背景图的路径;使这个动画无限循环下去,以实现背景图切换的效果。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        .div{
            width: 100%;
            height:447px;
            background-repeat: no-repeat;
            background-image: url("image/1.jpg");
            animation:frams 5s infinite;
        }
        @keyframes frams {
            0%{
                background-image: url("image/1.jpg");background-size: 100% 100%;background-repeat: no-repeat
            }
            33%{
                background-image: url("image/2.jpg");background-size: 100% 100%;background-repeat: no-repeat
            }
            66%{
                background-image: url("image/3.jpg");background-size: 100% 100%;background-repeat: no-repeat
            }
            100%{
                background-image: url("image/1.jpg");background-size: 100% 100%;background-repeat: no-repeat
            }
        }
    </style>
</head>

<body>
<div class="div"></div>
</body>
</html>