纯css图片滚动

基础概念

纯CSS图片滚动是指使用CSS技术实现图片的动态滚动效果，而不依赖JavaScript。这种效果可以通过CSS动画（animations）和CSS过渡（transitions）来实现。

优势

性能优越：纯CSS动画通常比JavaScript动画更高效，因为它们由浏览器的渲染引擎直接处理，而不是通过JavaScript引擎。
简洁性：CSS代码相对简洁，易于维护和理解。
兼容性：大多数现代浏览器都支持CSS动画和过渡，因此兼容性问题较少。

类型

水平滚动：图片在水平方向上滚动。
垂直滚动：图片在垂直方向上滚动。
循环滚动：图片滚动到一定位置后，会自动回到起点，形成循环效果。

应用场景

网站背景：为网站添加动态背景，提升视觉效果。
广告展示：在广告位展示滚动图片，吸引用户注意力。
产品展示：在产品页面展示多个产品的滚动效果。

示例代码

以下是一个简单的纯CSS水平图片滚动示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image Scrolling</title>
    <style>
        .scroll-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .scroll-content {
            display: flex;
            animation: scroll 10s linear infinite;
        }
        .scroll-content img {
            width: 200px;
            height: 200px;
            margin-right: 10px;
        }
        @keyframes scroll {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <img src="image1.jpg" alt="Image 1">
            <img src="image2.jpg" alt="Image 2">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

图片滚动不流畅：
- 确保图片大小合适，避免过大导致性能问题。
- 使用will-change属性优化动画性能，例如：will-change: transform;。

图片滚动方向不正确：
- 检查@keyframes定义的起始和结束状态，确保方向正确。
图片滚动速度过快或过慢：
- 调整animation-duration属性的值，控制动画的持续时间。

通过以上方法，可以实现一个简单且高效的纯CSS图片滚动效果。

页面内容是否对你有帮助？

有帮助

没帮助

使用页面级别滚动条滚动DIV (其高度设置为可见区域)

、

这是一张丑陋的图片，展示了我想要达到的目标。基本上，我需要使用页面滚动条来滚动DIV (其高度设置为可见区域)。在纯html5 5/CSS中，这是可能的吗?如果是的话，如何做到呢？

浏览 3提问于2014-11-16得票数 0

回答已采纳

2回答

如何在页面滚动上动画图像？

、、、、

我有一个页面，其中我有几张图片。我想知道如何在用户向下滚动页面时使图像变得可见？看看这个页面：谢谢。

浏览 0提问于2014-01-30得票数 1

4回答

我正在尝试创建一个“滑块”，用户可以水平滚动到特定的“滑块项”。然而，我试图用纯css来创建它；但是，我似乎无法使它正常工作。端：好的，让我解释一下这些图片。我想要的是使用户能够在容器中水平滚动以移动无序列表。但是，我不能在“容器”上使用overflow: hidden或overflow: scroll，因为它将隐藏所有溢出的内容，这是我不想要的。我如何才能做到这一点，或它甚至有可能实现与纯CSS？我的当前代码：

浏览 8提问于2016-01-18得票数 8

1回答

固定表头不随表体水平滚动

、、

我做了一个固定的标题，只有内容框会滚动，但如果我水平滚动，标题会留在浏览器的中间，我的内容会滚动，这让它看起来很愚蠢。我想同时垂直和水平滚动也。有没有人知道如何用纯css html来解决这个问题？我还不允许在这里发布图片，所以请转到www.covenantchetch-pca.net并水平滚动&您将看到我的问题。如果你需要看我的html css编码，请告诉我。我真的需要你的帮助。

浏览 0提问于2013-02-08得票数 0

2回答

在滚动上绘制/显示路径

、、、

我需要建立一个响应时间线上滚动动画。本简介的一部分是在滚动时显示一条路径-路径是一系列圆形圆圈，如- 我需要从左到右透露，这张图片是一个背景不透明的PNG，因为下面的租户身上还有其他事情--基本上我被一个像样的方法难住了。是否可以使用纯CSS或CSS /JS的组合从左到右显示不透明的图像？

浏览 2提问于2014-10-09得票数 0

1回答

在高山js中向下滑动后，在固定菜单中更改图像

、、、

我想更改图片的src图片(或使用其他技术？)当我向下滚动时，在我的固定菜单栏中。因此，在滚动过程中，它一直停留在页面的顶部。如何在纯

浏览 12提问于2021-12-19得票数 2

1回答

在div水平滚动时暂停垂直滚动，在水平滚动的末尾继续垂直滚动

、、、、

在第一张图片之后，有一个<div class="info">，它包含一些比父div更宽的文本，需要水平滚动(``overflow x: auto')。这个想法是让container垂直滚动，直到info点击container顶部边缘。此时垂直滚动停止，info开始水平滚动。在它到达结尾后，父container的垂直滚动继续，直到其内容的结尾。我尝试了几个选项，jQuery，视差，纯CSS，但最后都没有效果。下

浏览 1提问于2018-11-20得票数 0

1回答

如何使用用户控制的切换(启用/禁用)在iOS设备(iPad、iPhone、Mac)上禁用滚动/滚动

、、、、

所有的CSS、JavaScript、jQuery和混合解决方案都有至少一个缺陷，使滚动无法有效地禁用和/或切换。任何JavaScript或jQuery解决方案都可以。提前感谢！

浏览 2提问于2015-08-04得票数 6

回答已采纳

1回答

不带jQuery自定义滚动条的超文本标记语言表格

、、、、

我已经创建了一个具有固定标题和可滚动正文的HTML表。我想让滚动条看起来像附加的图片。 background-color: #00bce4; z-index: 10; } 仅仅使用HTML、CSS和纯Javascript就可以实现吗？

浏览 2提问于2017-04-05得票数 0

3回答

不使用背景图像的纯CSS图像哈弗

、

我试图在不使用背景图像的情况下，在悬停/翻转时进行纯CSS图像更改。到目前为止，我有一个图像，当您滚动该图像，另一个图像出现。下面是CSS：display: none;display: block;因此，当您滚动#visible div时我想把这些图片交换一下。因此，当您滚动#visible时，应该消失而不是保持可见。

浏览 4提问于2013-08-09得票数 5

回答已采纳

1回答

纯css滚动阴影

、

当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯css(没有JS)来实现的。我见过很多文章，可以用css实现多个背景和背景附件。预期行为：场景A:应该只在右侧启用阴影，因为滚动条位于最左边 * Only works in browsers supporting

浏览 0提问于2016-07-23得票数 13

2回答

纯CSS覆盖滚动

、、、

只使用css和html，在向下滚动页面的其余部分之前，是否可以完全滚动掉内部div (覆盖红色div)？本质上，想知道只有在css中是否可以在冻结后面div的同时进行覆盖滚动？然后，一旦红色div消失，解冻背景滚动并继续。类似于这里的站点：https://humaan.com/。或者需要使用某种JavaScript？

浏览 36提问于2020-12-31得票数 3

回答已采纳

4回答

如何添加纯CSS视差滚动

、、

我想为我的网站添加一些纯CSS视差滚动功能，但我尝试的所有功能似乎都不起作用。我也在这里寻找答案，但没有回答我的问题。并添加一个纯CSS视差滚动功能，使背景滚动速度减半？谢谢!

浏览 1提问于2014-09-02得票数 1

2回答

在这个网站中使用了什么类型的效果？

、、、

网站--> 在他们发布的图片中使用了悬停效果。这是什么样的效果呢？它是一个CSS3或者jquery效果，怎么做类似的效果呢？

浏览 1提问于2012-08-01得票数 0

1回答

javascript滚动触摸卷轴

、、、

我想添加触摸滚动到我的应用程序。我已经用鼠标轮滚动，拖动，点击等等。我已经(某种程度上)设法让滚动在iPad上使用一个名为的插件。问题是，当我添加代码时，div变成了某种滚动，但返回到顶部(弹性效果)。我想知道如何才能使它正确滚动。备注我也在使用来自的网站模板。)>visibleHeight){ //custom scroll depends on content height $dragger_cont

浏览 1提问于2011-10-25得票数 1

1回答