如果使用div+CSS实现自动轮播效果

最新推荐文章于 2024-09-03 15:05:46 发布

tongwen6171

最新推荐文章于 2024-09-03 15:05:46 发布

阅读量2.1k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_33774165/article/details/130381075

版权

实现这个效果可以使用 CSS3 的 transform 属性，结合 animation 和 @keyframes 实现动画效果。具体实现步骤如下：

在 HTML 中编写 div 区域内的内容，并用一个父级元素包裹，在父级元素上增加固定高度和 overflow: hidden 设置，确保显示的内容不会超过这个容器高度：

<div class="container">
  <div class="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <!-- ...  -->
  </div>
</div>

进行 CSS 样式的设置。首先需要将 .content 的高度设置为超过容器高度的值，再设置 @keyframes 的动画效果，将 .content 向上平移一个 .item 的高度，以及实现循环效果，最后在 .content 上应用此动画：

.container {
  height: 80px;
  overflow: hidden; 
}

.content {
  position: relative;
  height: 120px;
  animation: moveVertically 2s linear infinite;
}

@keyframes moveVertically {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-40px);
  }
}

.item {
  height: 40px;
  line-height: 40px;
  padding: 10px;
  background-color: #f6f6f6;
  margin-bottom: 10px;
}

这里的 @keyframes 中的 transform: translateY(-40px); 表示将 translateY 的值设置为一个 .item 的高度，让 .content 向上平移一个 .item 的高度，实现滚动展示效果，animation 属性则将这个动画应用在了 .content 上。

最后，根据需要调整 .container 和 .item 的高度以及动画的执行时间等属性，以适应自己的项目。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 实现区域滚动展示</title>
  <style>
    .container {
      height: 80px;
      overflow: hidden; 
    }

    .content {
      position: relative;
      height: 120px;
      animation: moveVertically 2s linear infinite;
    }

    @keyframes moveVertically {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-40px);
      }
    }

    .item {
      height: 40px;
      line-height: 40px;
      padding: 10px;
      background-color: #f6f6f6;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <!-- ... 这里还可以添加更多的内容 -->
    </div>
  </div>
</body>

</html>

在这个示例中，.container 的高度为 80px，实际展示的 .item 数量为 2 行 1 个，超过了显示范围的部分被隐藏，当设置 .content 的高度为 120px 时，则可以全部展示。代码中设置的动画持续时间为 2s，每次滚动完整个 .item 的刚好需要 2s 的时间。具体的样式和动画时间需要根据具体的需求进行调整。