国家icp备案网站整站优化代理
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