【CSS】---- 纯 CSS 实现无限滚动轮播

最新推荐文章于 2025-06-17 10:26:19 发布

Rattenking

最新推荐文章于 2025-06-17 10:26:19 发布

阅读量1.1k

点赞数 28

CC 4.0 BY-SA版权

分类专栏：【CSS和HTML】 Rattenking 的前端笔记文章标签： css 前端

本文链接：https://blog.csdn.net/m0_38082783/article/details/146062829

1. 前言

仅使用 CSS 创建一个具有无限滚动轮播的动画，无需 JavaScript。首先是无限滚动轮播动画效果在我们常见的开发中都是借用 JavaScript 实现，如果纯粹使用 CSS，我觉得还是一个比较有趣的。

2. 效果预览

输入图片说明

3. 效果分析

一屏展示了三个图片元素；
动画依次向左移动；
三个图片循环出现，出现无限滚动轮播效果。

4. 实现轮播卡片

使用 display: grid 将图片一排放三个；
使用 gap 设置两两图片之间的间距；
使用 aspect-ratio 设置图片的宽高比；
注意使用 taro 框架，因此需要去除图片的默认宽高。

4.1 DOM 结构

<View className="rui-will-change-content">
  <View className="rui-grid-content">
    <Image
      src={`https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/252666/12/28906/128995/67c70923F7ea34dfc/8ac042791e1dbae8.jpg!q70.dpg.webp`}
      className="rui-grid-item"
    ></Image>
    <Image
      src={`https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/262472/10/27398/106649/67c551a9F4eb82724/5b9f7cd6b67b1101.jpg!q70.dpg.webp`}
      className="rui-grid-item"
    ></Image>
    <Image
      src={`https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/266314/35/9312/155449/677cf57eF804de0b9/e709efdffed05aef.jpg!q70.dpg.webp`}
      className="rui-grid-item"
    ></Image>
  </View>
</View>

4.2 CSS 实现

.rui-grid-content {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rui-grid-item {
  width: auto; // 去掉 taro 图片的默认宽高
  height: auto; 
  aspect-ratio: 1