CSS3动画实现背景图轮播

最新推荐文章于 2024-09-06 23:20:39 发布

我卢本伟没有开挂

最新推荐文章于 2024-09-06 23:20:39 发布

阅读量1.2w

点赞数 14

文章标签： CSS3 HTML5 背景图轮播动画效果

本文链接：https://blog.csdn.net/weixin_43885123/article/details/84674070

版权

CSS3动画实现背景图轮播

利用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-im