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

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

1. 前言

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

2. 效果预览

输入图片说明

3. 效果分析

  1. 一屏展示了三个图片元素;
  2. 动画依次向左移动;
  3. 三个图片循环出现,出现无限滚动轮播效果。

4. 实现轮播卡片

  1. 使用 display: grid 将图片一排放三个;
  2. 使用 gap 设置两两图片之间的间距;
  3. 使用 aspect-ratio 设置图片的宽高比;
  4. 注意使用 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

相关文章:

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

1. 前言 仅使用 CSS 创建一个具有无限滚动轮播的动画,无需 JavaScript。首先是无限滚动轮播动画效果在我们常见的开发中都是借用 JavaScript 实现,如果纯粹使用 CSS,我觉得还是一个比较有趣的。 2. 效果预览 3. 效果分析 一屏展示了三个图片元素;动画依次向左移动;三个图…...

软考架构师笔记-计算机网络

1.9 计算机网络 OSI/RM 七层模型 物理层 二进制传输(中继器、集线器) (typedef) 数据链路层 传送以帧为单位的信息(网桥、交换机、网卡) 网络层 分组传输和路由选择(三层交换机、路由器)ARP/RARP/IGMP/ICMP/IP 传输层 端到端的连接(TCP/UDP)在前向纠错系统中&#xff0c;当接…...

Spring MVC 页面重定向返回后通过nginx代理 丢失端口号问题处理

Spring MVC页面重定向通过Nginx代理后出现端口丢失问题&#xff0c;通常由以下原因及解决方案构成&#xff1a; #‌# 一、Nginx配置问题&#xff08;核心原因&#xff09;‌ ‌1. Host头传递不完整‌ Nginx默认未将原始请求的端口信息传递给后端&#xff0c;导致应用生成重定向…...

道可云人工智能每日资讯|亚马逊云业务部门成立智能体人工智能团队

道可云元宇宙每日简报&#xff08;2025年3月6日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 《杭州市富阳区未来产业培育行动计划(2025-2026年)》发布 3月3日&#xff0c;杭州市富阳区经信局正式发布了《杭州市富阳区未来产业培育行动计划(2025-2026年)》&…...

算力100问☞第72问:算力与算法、数据的关系是什么?

目录 1、数据是基础 2、算法是核心 3、算力是保障 4、三者的关系 5、实际应用中的体现 算力、算法和数据是人工智能和计算机科学领域的三个核心要素,它们之间相互依赖、相互促进,共同构成了现代计算系统的基础。以下是它们之间的关系: 1、数据是基础 定义:数据是信息…...

AI-Ollama本地大语言模型运行框架与Ollama javascript接入

1.Ollama Ollama 是一个开源的大型语言模型&#xff08;LLM&#xff09;平台&#xff0c;旨在让用户能够轻松地在本地运行、管理和与大型语言模型进行交互。 Ollama 提供了一个简单的方式来加载和使用各种预训练的语言模型&#xff0c;支持文本生成、翻译、代码编写、问答等多种…...

Java开发的AI应用框架简述——LangChain4j、Spring AI、Agent-Flex

LangChain4j LangChain4j官网 star很多&#xff0c;文档齐全&#xff0c;在AI服务中&#xff0c;提供了丰富的功能&#xff0c;示例代码丰富。 简介 是一个功能丰富、易于使用的Java AI开发框架&#xff0c;特别适合需要快速集成和使用大型语言模型的Java开发者。 项目特点 …...

【算法day2】无重复字符的最长子串 两数之和

无重复字符的最长子串 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串 的长度。 https://leetcode.cn/problems/longest-substring-without-repeating-characters/ class Solution { public:int lengthOfLongestSubstring(string s) {int sub_length …...

HarmonyOS:基于hmrouter实现Page的生命周期监听

前言&#xff1a;在使用ArkTs语言写鸿蒙的App中&#xff0c;我们发现Page的生命周期函数&#xff0c;如下&#xff1a; 页面的生命周期(32) onPageShow:页面显示触发(页面特有) onPageHide&#xff1a;页面隐藏触发(页面特有) onBackPress&#xff1a;当用户点击返回按钮时…...

DeepSeek + 飞书多维表格搭建你的高效工作流

众所周知&#xff0c;大模型DeepSeek擅长于处理大规模语言模型推理任务&#xff0c;特别是在成本降低和思维链推理方面表现出色‌&#xff0c;我们一般把大模型必做我们的大脑&#xff0c;但是一个人不能只有大脑&#xff0c;还需要其他输入输出以及操作支配的眼耳鼻嘴手足等。…...

uniapp+<script setup lang=“ts“>使用 uni.$emit和uni.$on全局传递数据

注意&#xff1a; 在A页面直接使用 uni.$emit(changeCategoryKey, childCategory)传递&#xff0c;在B页面使用 uni.$on(changeCategoryKey, (val) > {console.log(val, 取值);});只在组件传递有效&#xff0c;页面跳转后是无效的 跳转页面使用的传递数据的方法如下&…...

综合使用pandas、numpy、matplotlib、seaborn库做数据分析、挖掘、可视化项目

目录 1.结构化数据挖掘 1.1依赖库导入和数据读取 1.2各品牌机型及售价统计 1.3视频录制规格与价格关联性分析 2.结构化数据预处理 2.1筛选特征 2.2特征标签归一化及编码 1.结构化数据挖掘 1.1依赖库导入和数据读取 导入必要的依赖库&#xff0c;读取 csv 格式数据集转化为 Data…...

docker中kibana启动后,通过浏览器访问,出现server is not ready yet

问题&#xff1a;当我在浏览器访问kibana时&#xff0c;浏览器给我报了server is not ready yet. 在网上试了很多方法&#xff0c;都未能解决&#xff0c;下面是我的方法&#xff1a; 查看kibana日志&#xff1a; docker logs -f kibana从控制台打印的日志可以发现&#xff…...

十、Redis 主从复制:原理解析、配置实践与优化策略

Redis 主从复制:原理解析、配置实践与优化策略 Redis 作为高性能的 NoSQL 数据库,主从复制(Master-Slave Replication) 是其核心特性之一。主从复制用于数据冗余、读负载分担、故障恢复,是 Redis 构建高可用架构的基础。本文将深入解析 Redis 主从复制的配置方法、复制机…...

使用JMeter(组件详细介绍+使用方式及步骤)

JSON操作符 在我们使用请求时,经常会遇到JSON格式的请求体,所以在介绍组件之前我会将介绍部分操作符,在进行操作时是很重要的 Operator Description $ 表示根元素 当前元素 * 通配符,所有节点 .. 选择所有符合条件的节点 .name 子元素,name是子元素名称 [start:e…...

lamp平台的应用

一.lamp介绍 网站&#xff1a; 静态网站 动态网站 【php语言 .php结尾的文件】 作用&#xff1a;运行php语言编写的动态网站应用 lamp LinuxApache【负责解析静态资源】MySQL【负责存储网站产生的数据】PHP【负责解析动态资源】 如上图所示&#xff0c;是lamp平台中三…...

蓝桥杯4T平台(串口打印电压值)

知识点&#xff1a;串口(单片机发送数据)按键ADC 题目 配置 代码 adc.c uint16_t getadc2(void) {uint16_t adc0;HAL_ADC_Start(&hadc2);adcHAL_ADC_GetValue(&hadc2);return adc; } adc.h uint16_t getadc2(void); main.c #include "lcd.h" #include…...

使用ASIWebPageRequest库编写Objective-C下载器程序

使用 ASIWebPageRequest 库编写 Objective-C 下载器程序是一个简单且高效的方式来处理 HTTP 请求。在 ASIHTTPRequest 和 ASIWebPageRequest 中&#xff0c;ASIWebPageRequest 是专门用于下载网页及其资源的库。 1. 安装 ASIWebPageRequest 首先&#xff0c;你需要安装 ASIHT…...

代码随想录算法训练营 | 图论 | 孤岛总面积、沉没孤岛

101. 孤岛的总面积//思路大概是先计算面积&#xff0c;然后如果有接触路面就返回false。可能稍微多余算了太多无用面积。 #include<bits/stdc.h> using namespace std; void sum(vector<vector<bool>>& finded,const vector<vector<int>>&a…...

迷你世界脚本出生点接口:Spawnport

出生点接口&#xff1a;Spawnport 彼得兔 更新时间: 2023-04-26 10:19:56 具体函数名及描述如下: 序号 函数名 函数描述 1 getSpawnPoint(...) 获取默认出生点 2 setSpawnPoint(...) 设置出生点位置 3 getChunkValidSpawnPos(...) 获取区块有效刷新点…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...