HTML 构造
首先，HTML 代码部分包含了5个.scroll元素，这个数量取决于你网页有几个无限滚动区域。每个scroll元素都放了两个div(d1和d2)用于创建滚动容器，个中每个div元素都具有相同的内容元素，用于展示滚动内容。本案例的紧张内容便是标签组span和图片组img。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Infinite Scrolling Animation</title> <link rel="stylesheet" href="./css/index.css"></head><body> <div class="scroll" style="--t: 20s"> <div> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> <span>Vue</span> <span>React</span> <span>Figma</span> <span>Photoshop</span> </div> <div> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> <span>Vue</span> <span>React</span> <span>Figma</span> <span>Photoshop</span> </div> </div> <div class="scroll" style="--t: 30s"> <!-- 同上 --> </div> <div class="scroll" style="--t: 10s"> <!-- 同上 --> </div> <div class="scroll" style="--t: 35s"> <!-- 同上 --> </div> <div class="scroll img-box" style="--t: 25s"> <div> <img src="./images/img_01.jpg" alt="image"> <img src="./images/img_02.jpg" alt="image"> <img src="./images/img_03.jpg" alt="image"> <img src="./images/img_04.jpg" alt="image"> <img src="./images/img_05.jpg" alt="image"> <img src="./images/img_06.jpg" alt="image"> <img src="./images/img_07.jpg" alt="image"> <img src="./images/img_08.jpg" alt="image"> <img src="./images/img_09.jpg" alt="image"> </div> <div> <!-- 同上 --> </div> </div></body></html>
标签组和图片组里的两个div要宽度保持同等，也便是说d1和d2里的每个标签span要对应相同，否则两个div就会涌现滚动覆盖或间隔过大。 还有便是每个scroll标签的自定义变量--t的值不一样(又快又慢)，要想滚动效果统一的话韶光调度一样就可以了。
CSS 样式接下来，看 CSS 部分设置了一些基本的全局样式，有重置样式、内容水平垂直居中布局、背景字体颜色等不做过多赘述。
/ @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap'); /@import './google-fonts.css'; { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body { min-height: 100vh; background-color: #222; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; }/ ... /
滚动容器scroll有一个固定宽度，然后对付溢出的内容隐藏不可见，以及利用 mask-image 创建了一个线性渐变遮罩，给内容带来滚动时的淡出淡入视觉效果。
span元素标签的样式设置了内联块级元素的展示办法，以及一些边距、边框、字母间距和文本转换。此外，当鼠标悬停时，还设置了背景颜色的变革。img图片的样式设置了最大宽度和灰度滤镜，当鼠标悬停在图片上时，滤镜会被移除，呈现出原始彩色图片。 两者都供应了一种交互反馈的效果。.scroll { display: flex; width: 700px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);}.scroll > div span { display: inline-block; margin: 10px; padding: 5px 10px; background-color: #333; border-radius: 5px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background-color 0.5s;}.scroll > div span:hover { background-color: #4caf50;}.img-box img { max-width: 150px; filter: grayscale(1); cursor: pointer; transition: filter 0.5s;}.img-box img:hover { filter: grayscale(0);}/ ... /技能实现
接着便是每个滚动容器内包裹两个一样的div元素，用于创建无缝衔接，下面分别简称为d1和d2。通过 white-space: nowrap 属性确保 div 内的内容不换行，从而使得内容能够水平滚动。
紧张通过两个不同的关键帧动画@keyframes关键帧和过渡animation属性掌握两个滚动区域实现的滚动效果。让元素以无限循环和线性动画的办法在.scroll滚动容器内移动。拿本案列的img-box元素阐释一下动画实行过程：
首先，它定义的CSS变量是--t: 25s。里面两个div元素都运用了25s匀速无限循环动画。然后，在d1中运用了延迟25s -1 = -25s，animate动画从 transform: translateX(100%) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧外部，即 transform: translateX(-100%)。末了，在d2中运用了延迟25s / -2 = -12.5s，animate2动画从 transform: translateX(0) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧更远的位置，即 transform: translateX(-200%)。滚动的间隔是比第一个d1滚动区域更远的，这样可以实现错开的滚动效果。.scroll > div { white-space: nowrap; animation: animate var(--t) linear infinite; animation-delay: calc(var(--t) -1);}@keyframes animate { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }}.scroll > div:nth-child(2) { animation: animate2 var(--t) linear infinite; animation-delay: calc(var(--t) / -2);}@keyframes animate2 { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); }}@media screen and (max-width: 768px) { .scroll { width: 90vw; } .scroll > div span { background-color: #4caf50; } .img-box img { width: 33vw; filter: grayscale(0); }}
由于animate延迟小于animate2，以是动画a2先实行，从右向左持续滚动到x: -200%，当滚动到-100%时也便是当前可见区域，此时a1开始实行动画 1 ，从右向左持续滚动到x: -100%，当滚动到100%时也便是当前可见区域，a2已经到-200%了，接着看a1连续滚动到-100%，a2连续从0到-200%，如此循环往来来往。
末了通过本篇文章相信能够帮助你更好地利用CSS来创建一个文本与图片无限滚动动画，从而理解节制和运用这个效果。通过 transform 属性的变革实现了水平滚动效果，使得 div 内的内容能够在容器内水平滚动，呈现出无限循环的连接效果。丰富了网页增长加了动态和交互性。
「绝无仅有」CSS打造吸睛的文本与图片无限滚动动画原文链接：https://juejin.cn/post/7306442463765544971
