CSS 实现轮播图

落落的前端学习之路

于 2022-04-18 15:02:16 发布

阅读量1.2k

点赞数 2

分类专栏： CSS 文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_36904182/article/details/124249835

版权

CSS 专栏收录该内容

11 篇文章

订阅专栏

这段代码展示了如何使用CSS创建一个轮播图组件。它包括一个容器`.banner`，内部有一个绝对定位的`.wrapper`，以及四个颜色不同的列表项`.shuffling`。通过CSS动画`@keyframes loop`实现了元素的平移效果，从而达到轮播的效果。每个列表项在不同的时间点平移到视口，形成连续滚动的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div className={styles.banner} >
                <div className={styles.wrapper} >
                  <ul className={styles.shufflingBody}>
                    <li className={styles.shuffling}>1</li>
                    <li className={styles.shuffling}>2</li>
                    <li className={styles.shuffling}>3</li>
                    <li className={styles.shuffling}>4</li>
                  </ul>
                </div>
              </div>

.banner {
  width: 300px;
  height: 200px;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shuffling {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  float: left;
}

.shufflingBody {
  position: absolute;
  overflow: hidden;
  display: flex;
  width: 1200px;
  height: 200px;
  animation: loop 10s ease-in-out infinite;
  top: 0;

  li {
    &:nth-child(1) {
      background-color: red;
      left: 0;
    }

    &:nth-child(2) {
      background-color: green;
      left: 300px;
    }

    &:nth-child(3) {
      background-color: aqua;
      left: 600px;
    }

    &:nth-child(4) {
      background-color: blue;
      left: 900px;
    }
  }
}

@keyframes loop {

  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(-300px);
  }

  50% {
    transform: translate(-600px);
  }

  75% {
    transform: translate(-900px);
  }

  100% {
    transform: translate(0);
  }
}