CSS动画之——跑马灯的无缝循环

已于 2023-07-07 11:34:42 修改
阅读量2.6k 收藏 7
点赞数 3
分类专栏： # html js css 特效 动画 文章标签： html5 css3 前端
于 2023-07-07 11:27:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40629521/article/details/131593135
版权
在构建官网时，为了实现人物卡片的无缝横向循环效果，作者遇到了问题。传统的跑马灯效果不理想，后经启发使用两个相同的盒子一前一后解决了问题。通过Vue.js的v-for循环创建八个盒子，并结合CSS动画实现了平滑过渡。鼠标悬停时可暂停并放大卡片，注意避免将暂停效果直接应用到所有卡片上，以防功能异常。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在写官网的过程中，有一个需求是想要是先人物卡片横向无缝循环的功能。但是直接用跑马灯的时候发现他的效果是要等所有的盒子都从左边消失后才会从后面出来第一个。 怎么调都不合适 给我整疑惑了， 后来百度下说是可以两个相同的盒子 一前一后，看到这豁然开朗，但是后来忘了是哪篇帖子了 这里记录一下。

先来看看效果 (因为上传限制只能传个单次循环的
请添加图片描述

首先我是用v-for循环定义了四个盒子 再复制一份 这样我们一共就有八个盒子

<div class="target-top" style="
最低0.47元/天 解锁文章
纯css实现 横向跑马灯（无缝滚动轮播，移入悬停）
讨口子
08-01 2037
【代码】纯css实现 横向跑马灯（无缝滚动轮播，移入悬停）
CSS中如何实现文字跑马灯效果（Vue2）
Circlellllll的博客
11-07 928
CSS中如何实现文字跑马灯效果（Vue2）。在CSS中如何实现文字跑马灯效果，利用@keyframes规则定义动画，使该容器内的文本向左或向右移动，达到循环播放的效果。此外，还可以通过设置动画的方向、持续时间和重复次数来调整跑马灯的具体表现形式。本文将从多个角度详细介绍如何利用CSS实现文字跑马灯效果，并提供详尽的代码示例。
HTML跑马灯无缝滚动
08-13
主要运用于html静态网页中的 产品 及其人物介绍
CSS实现文字跑马灯无缝衔接循环播放
weixin_48996679的博客
11-28 1418
文字跑马灯 文字循环播放 无缝衔接跑马灯
使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果
weixin_52231116的博客
05-30 3258
本文主要使用CSS实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
Taurus_666
10-09 5794
先上效果图 首先呈上效果图，主要是针对图片跑马灯效果（请忽略我的快速播放和录屏图标） 具体实现方式 目前我需要展示6张图片，但是为了实现无缝衔接，我的列表放了12张（放2遍图片），这样就不至于在切换时出现那么几毫秒的跳动。 <div id="swiper-roll-wrapper"> <div id="swiper-roll"> <d...
纯css图片无缝走马灯效果源码
11-11
纯css图片无缝走马灯效果源码，无需js控制，完美效果
跑马灯效果增强秘籍：软件算法与硬件优化策略
通过对算法基础的分析、高级软件技术的应用，以及硬件加速的原理和实践案例的阐述，本文指出了跑马灯效果在性能调优、用户体验优化以及未来发展方向上的关键因素。本文的研究有助于设计者和开发者更深入地理解跑马灯...
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 8169
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
iOS 强大第三方资源库
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
纯CSS滚动字幕(跑马灯)
11-30
使用纯CSS实现的滚动字幕(跑马灯)，使用了 animation 和 transform 结合，移动端和PC端都可使用
marquee标签实现跑马灯效果--无缝滚动
热门推荐
H小志
07-29 5万+
今天在做微信端的大转盘抽奖时，想把所有用户的抽奖记录做成无缝滚动的效果，无奈我的js功底太差，一时想不出实现的方法，便百度各种相似效果。但无意中发现了一个html标签——可以实现多种滚动效果，无需js控制。使用marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷，真的为我节省了不少时间。          marquee标签不是HTML3.2的一部分，并且只支持MSI
JS实现无缝隙跑马灯
TianXuab的博客
07-06 1458
此示例将5条消息滚动显示。动画持续10秒钟，并无限循环。JavaScript代码使用animationiteration事件来检测动画何时结束，将第一个元素复制到列表的末尾，然后将拼接的元素移动到列表末尾。这样就可以实现无缝隙的跑马灯效果。
纯CSS实现边框流光效果（跑马灯效果）
weixin_52057286的博客
03-27 1万+
使用css3新特性——动画，实现一个边框跑马灯效果
css3：图片实现无缝滚动的效果(走马灯)
weixin_46682277的博客
12-16 3657
<style> * { padding: 0; margin: 0; } li { list-style: none; } img { width: 200px; } ul { /*因为是10张照片，所以ul的宽是2000px*/ width: 2000px; animation: move 10s infinite linear; }
swiper.js实现跑马灯效果，无缝衔接,鼠标悬停
东东东东东辉
09-27 1026
【代码】swiper.js实现跑马灯效果，无缝衔接,鼠标悬停。
css 实现跑马灯效果 无限滚动 丝滑过渡
最新发布
m0_64288662的博客
12-16 275
css 用animation和transform做滚动效果，每当第一个块移动出显示区域后，则重新开始滚动，做到无缝衔接过渡。写出html显示的内容。
js 走马灯效果 无缝 不断实现
无
08-22 968
js jq走马灯 无缝无空白
html+css+js实现无缝隙跑马灯
用心创作每一篇文章
06-09 689
js实现从下到上跑马灯效果
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值