css一张图无限循环滚动,纯css实现单张图片无限循环无缝滚动，

最新推荐文章于 2025-06-29 16:28:34 发布
最新推荐文章于 2025-06-29 16:28:34 发布
阅读量1.1k 收藏
点赞数
文章标签： css一张图无限循环滚动
本文介绍了一种使用CSS关键帧动画实现图片滚动效果的方法。通过动态计算图片的实际高度和容器的高度差，来设置不同阶段的 translateY 值，使得图片能够在容器内平滑滚动并暂停。该方法兼容多种浏览器，包括 Webkit、Moz、O 和标准 keyframes。

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

functionaddKeyFrames(height,offsetHeight){

let style= document.createElement('style');

style.type= 'text/css';

let keyFrames= '\

@-webkit-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-moz-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-o-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-webkit-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@-moz-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@-o-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}';

keyFrames= keyFrames.replace(/A_DYNAMIC_VALUE/g, '-'+(height-(offsetHeight-height)/2)+'px');

keyFrames = keyFrames.replace(/B_DYNAMIC_VALUE/g, '-'+height+'px');

style.innerHTML=keyFrames;

document.getElementsByTagName('head')[0].appendChild(style);

}//初始化图片滚动动画高度

functioninitAnimate() {

const adLeftHeight= document.getElementById("adLeft").offsetHeight; //左侧区域高度

const adLeftWidth = document.getElementById("adLeft").offsetWidth; //左侧区域宽度

let leftImage = newImage();

let leftImageWidth= "";

let leftImageHeight= "";

leftImage.src=window.campaign.image_url;

leftImage.onload= function() {

leftImageWidth=leftImage.width;

leftImageHeight=leftImage.height;

let imageRealHeight= adLeftWidth * (leftImageHeight /leftImageWidth);//const imageBoxScrollHeight = document.getElementById("imageBox").scrollHeight; // 三张图片的总高度

//const imageHeight = imageBoxScrollHeight/3;// 单张图片高度

addKeyFrames(imageRealHeight,adLeftHeight);

}

}

html图片闪现循环效果,CSS实现图片无缝无限循环展示效果
weixin_42512246的博客
06-03 1929
只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。先看实际效果：无限循环滚动的关键是确定宽图片的位置首先，这个图片的设计需要有一点技巧，就是它的首位部分是相同重复的，上面的演示里使用的图片是下面这幅：滚动的过程是变换图片的left位置，直到图片完整的展示一个循环(事实上是移动到看起来是一个循环)，然后立刻将left值调整到最初的位置，开始下一次循环。我们...
xiaoshao纯css实现单张图片无限循环无缝滚动
asxxf的博客
03-12 796
需求是一共有两个， 1、单张竖图持续向上无缝滚动， 2、单张竖图滚动到正中间之后，停留3s，继续滚动。 一、用js setInterval定时器实现 js实现要通过不断的改变定位、复制图片的方式来做，效果极其不稳定 二、用css3 animation动画实现 需求1动画： @-webkit-keyframes scrollUp { 0% { ...
实现不间断向左滚动的图片轮播功能
最新发布
weixin_29041443的博客
06-29 906
为了在滚动过程中动态计算最后一张图片的位置，我们需要在JavaScript中记录图片的宽度，并在适当的时候调整容器的左偏移量。这通常涉及到对图片宽度和滚动容器宽度的计算，然后确定何时触发位置重置的逻辑。// 获取最后一张图片宽度// 容器宽度// 重置位置到第一张图片}, 20);通过上述代码，我们确保了图片滚动到容器末尾时能够无缝接续，从而实现无限循环的滚动效果。这些代码段和逻辑分析为实现平滑且连续的滚动动画提供了坚实的基础，进一步为我们的网站或应用提供了丰富的交互体验。
万字详解CSS动画核心——@keyframes，看完就会做动画！
2401_83607690的博客
05-08 2092
‌简单说@keyframes是CSS3的 ‌动画关键帧规则‌，就像导演给动画片分镜头一样，你可以定义动画在不同时间点的样式变化。‌举个栗子：开始时（0%）在左边结束时（100%）掌握@keyframes只需三步：1定义关键帧动画2 应用animation属性 3调试参数优化效果‌
css实现图片（箭头）无缝滚动（向右）
10-25
css样式控制实现图片无缝滚动，移动的速度是匀速，并且速度可控。
纯css实现单张图片无限循环无缝滚动
cnmeimei的博客
07-28 2778
参考链接：https://blog.youkuaiyun.com/qq_20777797/article/details/77916029 https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html 需求是一共有两个，1、单张竖图持续向上无缝滚动， 2、单张竖图滚动到正中间之后，停留3s，继续滚动。 一、用js setInterval定时器实现 js实现要通过不断的改变定位、复制图片的方式来做，效果极其不稳定 二、用css3 ani...
CSS实现图片无限循环无缝滚动
热门推荐
k464746的博客
10-26 1万+
实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
CSS3实现背景图片循环垂直滚动
还好吗
03-22 3940
如果有卡顿效果，动画设置一下缓冲效果为匀速就好了。 animation: up 5s linear infinite;
纯CSS打造图片定时循环滚动焦点图，兼容主流浏览器
05-22
纯CSS打造图片定时循环滚动焦点图，兼容主流浏览器
用CSS3实现无限循环的无缝滚动的实例代码
09-24
通过上述方法，我们可以用纯CSS实现无限循环的无缝滚动动画。这一技术不仅适用于简单的滚动显示，还可以扩展到更复杂的动画效果中。对于开发者而言，掌握CSS3中关于动画的这些高级用法，将有助于提升开发效率，并让...
【CSS】---- 纯 CSS 实现无限滚动轮播
止于至善
03-06 1181
仅使用 CSS 创建一个具有无限滚动轮播的动画，无需 JavaScript。首先是无限滚动轮播动画效果在我们常见的开发中都是借用 JavaScript 实现，如果纯粹使用 CSS，我觉得还是一个比较有趣的。动画向左移动直到隐藏使用 transform: translateX(-100%)，这里的动画是在动画结束时，第一组元素刚好全部隐藏。第二组元素本来是完全隐藏，在执行 transform: translateX(-100%)，动画结束时，刚好从隐藏状态全部显示出来。
html图片无缝循环滚动
11-28
图片无缝循环滚动，可自己修改方向
DIV+CSS实现横向无缝图片滚动效果
03-18
NULL 博文链接：https://javacunyin.iteye.com/blog/682776
用CSS3实现无限循环的无缝滚动的示例代码
12-02
有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 1.克隆A一份完全一样的数据B放在原数据A的后面； 2.使用setInterval向上滚动A的父级容器； 3.当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补漏出来的空白。当B移动到可视区域的顶部时，此时A刚好移出可视区域，那么此时将容器重新归0，用户是没有感知的，以为还是B中的第一条数据。然后继续向上滚动。 1. 使用CSS3来实现 若要用CSS
JS实现单张或多张图片持续无缝滚动的示例代码
10-15
本文将详细介绍如何使用JS实现单张或多张图片的持续无缝滚动效果，这种效果通常用于图片轮播或滚动展示。无缝滚动的核心在于创建一种视觉上连续无中断的滚动体验，而不会出现明显的跳动或回退现象。 首先，我们要...
如何使用CSS实现一个无限循环滚动的图片轮播效果？
官方推荐
08-24 8972
如何使用CSS实现一个无限循环滚动的图片轮播效果？
纯css实现多个图片不间断循坏滚动
liyanfei_aring的博客
11-21 948
* 鼠标移上去暂停滚动 */
如何使用CSS实现一个无限循环滚动的图片轮播效果
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-06 5091
在网页设计中，图片轮播（Carousel）是一种常见的视觉效果，它可以用来展示一系列的图片、广告或者其他内容。我们将从基本概念入手，逐步深入到具体的实现步骤，并提供完整的代码示例，帮助你理解和实现这一功能。通过本文的介绍，我们不仅学会了如何使用纯CSS实现无限循环滚动的图片轮播效果，还探讨了如何进一步增强轮播的交互性和响应性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过添加按钮或滑动事件，可以让用户手动控制图片的滚动，增加交互性。
精妙的配合！文字轮播与图片轮播？CSS 不在话下
奇舞周刊
05-25 1525
今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从表面上看，确实好像只有元素的 transform: translate() 在位移，但是注意，这里有两个难点：这是个无限轮播的效果，我们的动画需要支持任意多个元素的无限轮播切换因...
vue图片墙 无限滚动,尝试用CSS3实现无限循环的无缝滚动
12-28
### 使用 CSS3 实现 Vue 图片墙组件的无限循环无缝滚动 为了实现一个高效的无限循环无缝滚动效果，可以采用纯 CSS 解决方案来减少 JavaScript 的开销并提高性能。下面介绍一种通过 CSS 动画和伪类相结合的方式。 #### HTML 结构设计 创建一个容器用于容纳所有的图片项，并确保这些图片能够水平排列： ```html <div class="carousel-container"> <ul class="carousel-list"> <!-- 单个列表项 --> <li v-for="(item, index) in items" :key="index" class="carousel-item"> <img :src="item.src"/> </li> <!-- 复制首尾两个元素以平滑过渡 --> <li class="carousel-item clone-first"><img src="{{items[0].src}}"/></li> <li class="carousel-item clone-last"><img src="{{items[items.length - 1].src}}"/></li> </ul> </div> ``` #### 关键样式定义 利用 `@keyframes` 定义动画路径以及设置初始状态与结束状态之间的变化；同时应用 `transform translateX()` 来控制位移距离。注意这里的宽度计算应该考虑实际内容加上额外复制的内容[^2]。 ```css .carousel-container { overflow: hidden; } .carousel-list { display: flex; animation-name: slideLoop; animation-duration: 8s; /* 可调整 */ animation-timing-function: linear; animation-iteration-count: infinite; } .carousel-item { min-width: 25%; /* 假设每张图占据四分之一空间 */ } /* 额外添加的关键帧规则 */ @keyframes slideLoop { from { transform: translateX(0); } to { transform: translateX(-{{ (imagesCount + 1) * itemWidth }}px); } } .clone-first, .clone-last{ position:absolute; } ``` 此方法的核心在于巧妙地处理了视觉上的连续性和物理位置上的重置，从而实现了真正的无间断滚动体验。对于 Vue.js 应用程序来说，只需要关注数据绑定部分即可轻松集成该功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值