CSS:跑马灯

<div class="swiper-container"><div class="swiper-wrapper"><!-- 第一组 --><div class="item" v-for="item in cardList" :key="'first-'+item.id"><img :src="item.image" alt="" class="mb-15"></div><!-- 第二组(用于无缝衔接) --><div class="item" v-for="item in cardList" :key="'second-'+item.id"><img :src="item.image" alt="" class="mb-15"></div></div>
</div>
.swiper-container {width: 100%;overflow: hidden;padding: 0 .4rem;position: relative;
}.swiper-wrapper {display: flex;animation: scroll 30s linear infinite;width: fit-content; // 确保容器宽度适应内容
}.item {flex-shrink: 0;width: 2.2rem;height: 2.84rem;background: #FFFFFF;border-radius: .2rem;border: .1rem solid #B0B0AC;margin-right: .3rem;img{width: 2rem;height: 2rem;}
}
@keyframes scroll {0% {transform: translateX(0);}100% {transform: translateX(calc(-50%)); // 移动一半距离,确保无缝衔接}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/68127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

99.16 金融难点通俗解释:营业总收入

目录 0. 承前1. 简述2. 比喻&#xff1a;小明家的小卖部2.1 第一步&#xff1a;了解小卖部的收入来源2.2 第二步&#xff1a;计算一天的收入2.3 第三步&#xff1a;理解营业总收入 3. 生活中的例子3.1 小卖部的一周营业3.2 不同季节的变化 4. 小朋友要注意4.1 营业总收入不等于…

MyBatis Plus 的 InnerInterceptor:更轻量级的 SQL 拦截器

在 Spring Boot 项目中使用 MyBatis Plus 时&#xff0c;你可能会遇到 InnerInterceptor 这个概念。 InnerInterceptor 是 MyBatis Plus 提供的一种轻量级 SQL 拦截器&#xff0c;它与传统的 MyBatis 拦截器&#xff08;Interceptor&#xff09;有所不同&#xff0c;具有更简单…

CLOUDFLARE代理请求重定向你太多次

现象 使用CLOUDFLARE代理前请求正常&#xff0c;使用CLOUDFLARE代理请求后出现 原因分析 以下是我的猜测&#xff0c;在默认情况下 CLOUDFLARE代理&#xff0c;可能是直接请求我们服务器的IP&#xff0c;比如&#xff1a;http://1.1.1.1 而不是通过域名的方式&#xff08;如…

大模型开发 | RAG在实际开发中可能遇到的坑

近年来&#xff0c;大语言模型 (LLM) 的飞速发展令人瞩目&#xff0c;它们在各个领域展现出强大的应用潜力。然而&#xff0c;LLM 也存在一些固有的局限性&#xff0c;例如知识更新滞后、信息编造 (幻觉) 等问题。为了克服这些挑战&#xff0c;检索增强生成 (Retrieval-Augment…

DDD架构实战第五讲总结:将领域模型转化为代码

云架构师系列课程之DDD架构实战第五讲总结:将领域模型转化为代码 一、引言 在前几讲中,我们讨论了领域模型的重要性及其在业务分析中的渐进获得方法。本讲将聚焦于如何将领域模型转化为代码,使得开发人员能够更轻松地实现用户的领域模型。 二、从模型到代码:领域驱动设计…

AI Agent的多轮对话:提升用户体验的关键技巧

在前面的文章中&#xff0c;我们讨论了 AI Agent 的各个核心系统。今天&#xff0c;我想聊聊如何实现一个好用的多轮对话系统。说实话&#xff0c;这个话题我琢磨了很久&#xff0c;因为它直接影响到用户体验。 从一个槽点说起 还记得我最开始做对话系统时的一个典型场景&…

vue router路由复用及刷新问题研究

路由复用问题 当路由匹配路径未发生变化时&#xff0c;只是相关的参数发生了变化&#xff0c;路由跳转时&#xff0c;会发现虽然地址栏中的地址更新到了新的链接&#xff0c;但是页面渲染并未触发响应路由组件的created,mounted等钩子函数&#xff0c;也就意味着组件并没有被重…

Android各个版本存储权限适配

一、Android6.0-9.0 1、动态权限申请&#xff1a; private static String[] arrPermissions {android.Manifest.permission.READ_EXTERNAL_STORAGE, android.Manifest.permission.WRITE_EXTERNAL_STORAGE,android.Manifest.permission.ACCESS_FINE_LOCATION,android.Manifest.…

房租管理系统的智能化应用助推租赁行业高效运营与决策优化

内容概要 在现代租赁行业中&#xff0c;房租管理系统的智能化应用正在逐步成为一个不可或缺的工具。通过整合最新技术&#xff0c;这些系统为租赁管理的各个方面提供了极大的便利和效率提升。从房源管理到合同签署再到财务监控&#xff0c;智能化功能能够帮助运营者在繁琐的事…

数据结构初阶之队列的介绍与队列的实现

一、概念与结构 概念&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO (First In First Out) 的特点。 入队列&#xff1a;进行插入操作的一端称为队尾 出队列&#xff1a;进行删除操作的一端称为…

GTO 门级可关断晶闸管,全控性器件

介绍 门级可关断晶闸管是一种通过门极来控制器件导通和关断的电力半导体器件。 结构特点 - 四层半导体结构&#xff1a;与普通晶闸管相似&#xff0c;GTO也是由PNPN四层半导体构成&#xff0c;外部引出三个电极&#xff0c;分别是阳极&#xff08;A&#xff09;、阴极&#x…

FlinkSql使用中rank/dense_rank函数报错空指针

问题描述 在flink1.16(甚至以前的版本)中&#xff0c;使用rank()或者dense_rank()进行排序时&#xff0c;某些场景会导致报错空指针NPE(NullPointerError) 报错内容如下 该报错没有行号/错误位置&#xff0c;无法排查 现状 目前已经确认为bug&#xff0c;根据github上的PR日…

序列标注:从传统到现代,NLP中的标签预测技术全解析

引言 序列标注任务是自然语言处理&#xff08;NLP&#xff09;中的核心任务之一&#xff0c;广泛应用于信息抽取、文本分类、机器翻译等领域。随着深度学习技术的快速发展&#xff0c;序列标注任务的性能得到了显著提升。本文将从基础概念入手&#xff0c;逐步深入探讨序列标注…

CentOS 7 安装fail2ban hostdeny方式封禁ip —— 筑梦之路

centos 7 换源参考CentOS 7.9 停止维护(2024-6-30)后可用在线yum源 —— 筑梦之路_centos停止维护-CSDN博客 安装fail2ban yum install fail2ban 新增配置文件 cat > /etc/fail2ban/action.d/hostsdeny.conf << EOF [Definition] actionstart actionstop action…

速通Docker === Docker Compose

目录 Docker Compose 简介 Docker Compose 常用命令 使用 Docker Compose 启动 WordPress 普通启动方式&#xff08;使用 Docker 命令&#xff09; 使用 Docker Compose 启动 Docker Compose 的特性 Docker Compose 简介 Docker Compose 是一个用于定义和运行多容器 Dock…

关于BAR(PCIE BAR或AXI BAR)的解释

假设某BAR的默认值是xxxx_0000&#xff08;这里表示8个比特位&#xff09;&#xff0c;其中低4位不可写&#xff0c;可操作的最低位是4&#xff0c;所以该BAR的大小是2^416字节&#xff1b; 1、系统软件向BAR写0xFF 2、系统软件读BAR&#xff0c;读到的值是0xF0&#xff0c;于是…

MySQL 事件调度器

MySQL 事件调度器确实是一个更方便且内置的解决方案&#xff0c;可以在 MySQL 服务器端自动定期执行表优化操作&#xff0c;无需依赖外部工具或应用程序代码。这种方式也能减少数据库维护的复杂性&#xff0c;尤其适用于在数据库频繁更新或删除时进行自动化优化。 使用 MySQL …

ESP32服务器和PC客户端的Wi-Fi通信

ESP32客户端-服务器Wi-Fi通信 本指南将向您展示如何设置ESP32板作为服务端&#xff0c;PC作为客户端&#xff0c;通过HTTP通信&#xff0c;以通过Wi-Fi&#xff08;无需路由器或互联网连接&#xff09;交换数据。简而言之&#xff0c;您将学习如何使用HTTP请求将一个板的数据发…

为什么IDEA提示不推荐@Autowired❓️如果使用@Resource呢❓️

前言 在使用 Spring 框架时&#xff0c;依赖注入&#xff08;DI&#xff09;是一个非常重要的概念。通过注解&#xff0c;我们可以方便地将类的实例注入到其他类中&#xff0c;提升开发效率。Autowired又是被大家最为熟知的方式&#xff0c;但很多开发者在使用 IntelliJ IDEA …

如何用数据编织、数据虚拟化与SQL-on-Hadoop打造实时、可扩展兼容的数据仓库?

在大数据技术迅猛发展的背景下&#xff0c;许多人认为传统数据仓库已过时。然而&#xff0c;这种观点忽略了数据仓库的核心价值&#xff1a;统一的数据视图、强大的业务逻辑支撑以及丰富的数据分析能力。在企业数据架构转型中&#xff0c;数据仓库不仅未被淘汰&#xff0c;反而…