当前位置：首页 > news >正文

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

news 2025/8/26 7:23:13

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"><Imagesrc={`https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/252666/12/28906/128995/67c70923F7ea34dfc/8ac042791e1dbae8.jpg!q70.dpg.webp`}className="rui-grid-item"></Image><Imagesrc={`https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/262472/10/27398/106649/67c551a9F4eb82724/5b9f7cd6b67b1101.jpg!q70.dpg.webp`}className="rui-grid-item"></Image><Imagesrc={`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;borde

查看全文

http://www.lryc.cn/news/547708.html