CSS中照片的滚动图

最新推荐文章于 2025-06-12 13:16:54 发布

Python-827

最新推荐文章于 2025-06-12 13:16:54 发布

阅读量949

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2402_85908998/article/details/142884776

轮播图

首先，我们需要将先完成html部分，在盒子div里面加入四个图片，代码如下：

<body>
    <div class="con">
        <div class="nav">
            <img src="../图片/photo01.png">
            <img src="../图片/photo02.png">
            <img src="../图片/photo03.png">
            <img src="../图片/photo04.png">
        </div>
    </div>
</body>

第二步，设置盒子和照片大小以及使照片全部排列在一行内（使用浮动），照片排在一行内肯定是超出盒子本身长度，这里需要将溢出部分进行隐藏（overflow：hidden；）和照片要设置显示的状态，将装照片的盒子进行定位，这里用到定位中的口诀-----子绝父相，代码如下：

.con{
      width: 100px;
      height: 75px;
      position: relative;
      overflow: hidden; 
}
.nav{
      width: 400px;
      height: 75px;
      position: absolute;
      animation: move 10s normal infinite;
}
img{
      display: block;
      width: 100px;
      height: 75px;
      float: left; 
}

最后一步，设置动画效果，照片排列在一行内，每动一次，照片需要向左移动一个照片宽度的位置，添加动画代码如下：

.nav{
            width: 400px;
            height: 75px;
            position: absolute;
            animation: move 10s normal infinite;
        }
@keyframes move{
            0%{
                left: 0px;
            }
            25%{
                left: -100px;
            }
            50%{
                left: -200px;
            }
            100%{
                left: -300px;
            }
        }

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .con{
            width: 100px;
            height: 75px;
            position: relative;
            overflow: hidden; 
        }
        .nav{
            width: 400px;
            height: 75px;
            position: absolute;
            animation: move 10s normal infinite;
        }
        img{
            display: block;
            width: 100px;
            height: 75px;
            float: left; 
        }
        @keyframes move{
            0%{
                left: 0px;
            }
            25%{
                left: -100px;
            }
            50%{
                left: -200px;
            }
            100%{
                left: -300px;
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="nav">
            <img src="../图片/photo01.png">
            <img src="../图片/photo02.png">
            <img src="../图片/photo03.png">
            <img src="../图片/photo04.png">
        </div>
    </div>
</body>
</html>