开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css图片滚动播放

基础概念

CSS 图片滚动播放是一种利用 CSS 动画技术实现图片按顺序滚动显示的效果。这种效果通常用于网页背景、广告展示、图片轮播等场景。

相关优势

简单易实现：使用 CSS 动画可以轻松实现图片滚动播放效果，无需复杂的 JavaScript 代码。
性能较好：CSS 动画由浏览器直接处理，性能优于 JavaScript 动画。
兼容性好：现代浏览器普遍支持 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 图片滚动播放</title>
    <style>
        .scroll-container {
            width: 100%;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .scroll-container img {
            width: 100%;
            height: auto;
            position: absolute;
            animation: scroll 15s linear infinite;
        }
        .scroll-container img:nth-child(1) {
            animation-delay: 0s;
        }
        .scroll-container img:nth-child(2) {
            animation-delay: 5s;
        }
        .scroll-container img:nth-child(3) {
            animation-delay: 10s;
        }
        @keyframes scroll {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
</body>
</html>

参考链接

CSS 动画教程

常见问题及解决方法

图片滚动速度过快或过慢：
- 调整 @keyframes 中的动画时长（例如 15s）来控制滚动速度。

图片滚动不连续：
- 确保每张图片的 animation-delay 设置正确，使得图片按顺序滚动。
图片显示不全：
- 检查 .scroll-container 的 width 和 height 设置，确保容器足够大以容纳所有图片。

通过以上方法，你可以轻松实现 CSS 图片滚动播放效果，并根据需要调整和优化动画效果。

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

有帮助

没帮助

相关·内容

css实现图片横向排列滚动

.imageList{ overflow-x: auto; overflow-y: hidden; height...

5.8K7 0

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

07/03/css3-infinite-scroll.html 需求是一共有两个， 1、单张竖图持续向上无缝滚动， 2、单张竖图滚动到正中间之后，停留3s，继续滚动。...一、用js setInterval定时器实现 js实现要通过不断的改变定位、复制图片的方式来做，效果极其不稳定二、用css3 animation动画实现需求1动画： @-webkit-keyframes...注意： 1、前提是把一张图片复制成3张，以实现无缝滚动，网上看了很多人此类无缝循环滚动的方法，实现出来之后，每次回到起点都会有跳动的感觉，这里经过摸索，给动画上移的距离设为图片的高度，就不会有跳动问题了...，完美无限循环+无缝滚动； 2、图片每停3s滚动一次，且每次刚好停在正中间，上线留的衔接的图片距离相等，这里就要计算一下，每次动画上移距离= 图片实际显示高度-（所在区域的总高度-上间距高度）。...以下是图片滚动的js，如果要实现动态获取图片高度，则需要写下面的js： function addKeyFrames(height,offsetHeight){ let style = document.createElement

3.8K3 0

实现文字滚动播放

实现文字滚动播放实现文字滚动播放，通过使用CSS3动画与Js控制来实现，由于使用CSS动画来控制偏移限制较多，因此通常还是使用Js来实现。...实现 CSS Animation 使用CSS动画方法，使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。...infinite; } 循环滚动播放滴滴答答滴滴答答滴滴答答...infinite; } 循环滚动播放滴滴答答滴滴答答滴滴答答...nowrap; } 循环滚动播放滴滴答答滴滴答答滴滴答答

4K4 0

使用numpy处理图片——滚动图片

滚动图片是指：图片尺寸不变的情况下，把图片内容做某个方向的移动。这样就会出现一种情况：被移走的区域显示为空白，或者被超出尺寸的区域填充。...numpy的滚动数组的方法能够做到下图效果，即空白区域用超出尺寸的元素填充。

1211 0

css实现横向滚动条(css纵向滚动条)

注意：(滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式，常用属性如下） ::-webkit-scrollbar...滚动条整体样式 ::-webkit-scrollbar-button 一设置滚动条样式，滚动条两端的按钮图标就消失，但可以重新设置图片、新样式 ::-webkit-scrollbar-track...注意：(滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条高度，无法修改纵向滚动条高度、横向滚动条宽度数值) /* 1,滚动条 */ ::-webkit-scrollbar...{ width: 20px; /* 纵向滚动条宽度 */ height: 15px; /* 横向滚动条高度 */ background:...{ width: 30px; /* 横向滚动条宽度 */ height: 20px; /* 纵向滚动条高度 */ background: black

7.6K3 0

CSS | 视差滚动 | 笔记

形成的效果称之为视差滚动 background-attachment 固定背景的位置是使用CSS创建视差效果的最早方法。...scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素 css_demo 设置 overflow: scroll，当元素内容超出页面时滚动。...，会发现就图片移动速度而言，图1 > 图2 > 图3，这是因为这些图片离你的距离：图1 < 图2 < 图3, 图1 离你最近，因此随着你的滚动看起来最快，（注意：这里图片看起来没有近大远小，是因为手动放大了图片尺寸...: 长度值: 背景图片左上角相对于背景图片所在元素左上角 // 即背景图片左上角与容器左上角对齐 // 依次为左右上下 background-position: 0 0;...CSS 雪碧图位置雪碧图是根据 CSS sprite 音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

8202 1

使用scipy处理图片——滚动图片

在《使用numpy处理图片——滚动图片》一文中，我们介绍了numpy的roll方法，它只能让超出区域的元素回到被移动的区域中，如下图。而scipy的滚动图片方法则有更多有意思的模式。

991 0

CSS固定背景图片不跟随浏览器的滚动

看过很多博客、微博和QQ空间里面，很多人都给自己的小窝设置了固定背景，不随浏览器滚动，实现的方法除了Javascript，CSS也可以轻松实现。 ?...background不随浏览器滚动的代码如下： CSS代码 body {background:url(背景图片地址) no-repeat fixed center top;margin:0;padding...:0;} 只需要一个核心代码就实现了背景不随浏览器滚动，兼容了IE6+浏览器，其核心代码为：background-attachment: fixed; 无论滚动条如何拖动，背景图片始终牢牢固定在页面上...如果你用其他的方法不能解决IE6背景不随浏览器滚动，不妨试试上面的CSS代码，或者用下面的JS来解决。...IE6浏览器实现背景不随浏览器滚动的代码： JavaScript代码 var scrollBackground = true;</script

1.5K1 0

css滚动进度条

需求首先先描述一下需求，就是在顶部有一个进度条，随竖向滚动条的滚动而长短变化，用以显示文章阅读进度，实现的方式是采用css来实现。...既然是使用css来实现，那么我们应该思考一下如何使用css，貌似css没有这种功能吧。但是我们可以变个思路来实现，下面来说一下具体的实现方式。...实现在css中有一个属性叫做Linear Gradients，这是一个线性变化的样式属性，他可以让一个颜色渐变为另一个颜色。...我们看一下顶部的效果，通过滚动我们发现顶部覆盖的区域越来越大，如果下面盖住，只留下上面一点不就实现效果了吗，对此，只需要对上述代码做一个小小的修改即可 #grad1 p::after{

1.3K1 0

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思，于是就做了一个，demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使用...js来实现的，实际上，如果你对兼容性要求不是很高，比方说忽略IE浏览器，则我们使用简单的几行CSS代码就可以实现视差滚动效果了。...css有一个background-attachment属性作用是设置背景图像是否固定或者随着页面的其余部分滚动。...DOCTYPE html> css视差滚动 css" href="index.css">

3.8K8 0

WSHorizontalPickerView 图片水平滚动封装

WSHPickerView.delegate = self; [WSHPickerView updateData]; [self.view addSubview:WSHPickerView]; 里面一些常量我是按照我的demo图片

2.9K1 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...DOCTYPE> JS实现图片循环滚动 #roll {...setInterval(Marquee, speed) demo.onmouseover = function() { clearInterval(MyMar)//鼠标移上时清除定时器达到滚动停止的目的

19.8K3 0

CSS实现隐藏滚动条但是可以滚动

今天记录一个很小的问题，在工作之中会经常遇到的，当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 ?

3.6K0 0

OpenHarmony 图片缩放&滚动—LargeImage

简介加载可以执行缩放（放大和缩小）和滚动操作的图像，图像放大之后可以拖动查看。详细功能：1.加载图像。2.支持缩放。3.支持拖动查看大图。...rotate:number =0; private aboutToAppear() { this.model.setImage($r('app.media.tiger')); // 设置图片资源...this.model.setMaxScale(2); // 设置图片最大缩放比例 } build() { Stack({ alignContent: Alignment.Bottom...ClickEvent) => { this.rotate +=90; this.model.setOrientation(this.rotate) // 设置图片旋转角度

1651 0

jQuery实现消息滚动播放的效果

场景需求：在大屏幕上，消息会进行一个实时滚动播报的效果，将现有的内容进行一个来回滚动的播放~~ 代码： css.../bootstrap.min.css"> </script..., 1000); }).trigger("mouseleave"); //自动触发触摸事件 //滚动动画...$uList.css({ marginTop: 0 }).find("li:first").appendTo

4.8K2 0

css控制滚动条透明,CSS控制滚动条样式的解析

我们在之前的两篇文章中，我们给大家介绍了关于CSS设置div滚动条样式、以及CSS3自定义滚动条样式的实例，都知道当内容超出容器时，容器会出现滚动条，那我们如何使用CSS控制滚动条样式的呢？...下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/ /*定义滚动条轨道*/ #style-2::-webkit-scrollbar-track { background-color...*隐藏滚动条： 1、去掉水平方向的滚动条： 2、去掉垂直方向的滚动条： 3、隐藏横向、显示纵向滚动条： 4、隐藏全部滚动条：或者更好的方法就是把滚动条的颜色设置为完全透明，这样既可以实现内容的滚动...应用: 没有水平滚动条: test 没有垂直滚动条 test 没有滚动条 test 自动显示滚动条 test 自己定义滚动条的颜色，代码如下：Body { scrollbar-arrow-color...scroll 无论内容是否超越范围，都将显示滚动条。相信通过本文的学习，小伙伴们对css控制滚动条样式，有了进一步的了解和认识，希望对你的工作有所帮助！

6K2 0

【案例】jQuery+CSS3页面滚动图片展示动画特效

哈喽大家好，又到了每周二经典案例环节啦~ 今天段老师给同学们带来的是jQuery+CSS3页面滚动图片展示动画特效 ?...01脚本简介一款创意不错的jQuery+CSS3页面滚动图片展示动画特效，使用GSAP和ScrollMagic来制作页面向下或向上滚动时出现的动画效果。...02效果展示 jQuery+CSS3页面滚动图片展示动画特效 ? 屏幕前的你想知道如何制作吗？...那就快戳下方视频学习吧~ 03教学视频 ▼ https://v.qq.com/x/page/y0957zyxhhh.html 以上就是给同学们分享的jQuery+CSS3页面滚动图片展示动画特效教学视频

4.2K2 0

图片无缝上下滚动

今天要用到图片无缝滚动，在网上找了半天要么不能滚动，要么不能无缝。我最后找到了一个可以达到要求的代码，现在贴出来放便大家使用。我测试过的，可以使用。

5.4K5 0

CSS横向滚动条实现

需求：当从后端请求多个元素的时候，固定在一个div里面，若是超过div，会出现横向滚动条，限制换行 1：在父级元素中使用：white-space: nowrap，使父级元素中的内容不换行 2：在子级元素中使用...DOCTYPE html> div横向滚动条</title

5.3K1 0

vue css 滚动楼层导航定位

理解滚动图左右结构 <li...false } else { this.setFloorScrollArrowDown(timer) } }, /** * 设置楼层向上滚动...document.body.scrollTop = window_scrollTop - timer.step } }, timer.times) }, /** * 设置楼层向下滚动...false } else { this.setFloorScrollArrowDown(timer) } }, /** * 设置楼层向上滚动...min-height: 300px; text-align: center; color: #FFF; background-color: #404040; } 参考滚动楼层导航定位

3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭