怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动

效果图:

Snipaste_2019-12-20_10-17-26.jpg思路分析:

第一步,定义div>ul>li*7,因为有7张图片。

第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。

第三步,实现滚动。用到了动画相关知识点,即

animation: move 5s linear infinite;
@keyframes move{
from{
transform: translateX(0);
}
to{
transform: translateX(-882px);
}
}

第四步,现在已经可以向左滚动了,但是问题是什么呢?“无缝”还没有实现,即向左滚动后原位置出现了空隙。解决办法就是复制相同的li内容添加在后面,为了避免出现两行,要把ul的宽度设置为200%。

(相关课程推荐:css视频教程

第五步,最后一步,限制所有内容都在div内,所以添加overflow:hidden,大功告成。

完整源代码

<!DOCTYPE html>
<html>
<head>
	<title>无缝滚动效果</title>
	<style type="text/css">
	   *{
	   	margin: 0;
	   	padding: 0;
	   }
		ul{
			list-style: none;
			/*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
			-webkit-animation: move 5s linear infinite;
			-o-animation: move 5s linear infinite;
			animation: move 5s linear infinite;
			width:200%;
		}
		li{
			float: left;
			overflow: auto;
		}
		li img{
			width: 126px;
		}
		div{
			width:882px;
			margin:100px auto;
			border: 1px solid red;
			overflow: hidden;
		}
		@keyframes move{
			from{
				transform: translateX(0);
			}
			to{
				transform: translateX(-882px);
			}
		}
	</style>
</head>
<body>
<div>
	<ul>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
		<li><img src="css-5.jpg"></li>
		<li><img src="hc1.jpg"></li>
		<li><img src="html.jpg"></li>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
		<li><img src="css-5.jpg"></li>
		<li><img src="hc1.jpg"></li>
		<li><img src="html.jpg"></li>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
	</ul>
</div>
</body>
</html>
Image placeholder
前端答疑
未设置
  38人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了心想:知乎

CSS实现多行省略

什么是多行省略?当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。同行这么做:

基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

医疗保健案例研究:怎样用深度学习检测疟疾

导言本文中,我们将集中讨论人工智能(AI)与流行的开源工具、技术和框架如何被用于发展和改善医疗行业。俗话说,健康就是财富。在这篇文章中,我们将探讨如何利用人工智能来检测一种致命的疾病–疟疾,以及如何建

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

CSS如何让背景图片不重复?

CSS如何让背景图片不重复?css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。css中background-r

css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

基于Redis实现Spring Cloud Gateway的动态管理

引言:SpringCloudGateway是当前使用非常广泛的一种API网关。它本身能力并不能完全满足企业对网关的期望,人们希望它可以提供更多的服务治理能力。但SpringCloudGateway并不

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

css设置div滚动条内容不超过就不显示

css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示滚

css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

css怎么隐藏滚动条样式?

css怎么隐藏滚动条样式?用到的属性有overflow:hidden,下面,我们用一个案例来说明实现的方法及步骤。1、新建一个html文件,在head中写入内部CSS代码:2、然后再body中添加一个

redis实践及思考

导语:当面临存储选型时是选择关系型还是非关系型数据库?如果选择了非关系型的redis,redis常用数据类型占用内存大小如何估算的?redis的性能瓶颈又在哪里?背景前段时间接手了一个业务,响应时间达

dw如何使用css设置字体

dw如何使用css设置字体设置页面中的字体可以使用“页面属性”对话框,页面属性可以设置网页的字体、背景颜色和背景图像等样式。具体操作方法如下:1、选择“文件”>“页面属性”,或单击文本的属性检查器中的

怎么用css美化网页

怎么用css美化网页1、我们先来看一下没有进过美化的html页面是什么样子吧。2、然后我们来看一下有美化效果的样子是什么样子,是不是漂亮一些。(相关课程推荐:css视频教程)3、准备好自己需要修饰的h

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

如何使用css取消字体下划线?

在给文字加上超链接锚文本(htmla)后,字体就被默认自动加上下划线样式,但可以通过CSS实现取消去掉全网页超链接的文字字体被加下划线样式。我们可以使用text-decoration:none来取消默

asp.net如何调用css

asp.net如何调用css1、静态方式调用在head标签中加入link标签2、引用了模板页的页面添加方式首先可以定义一个类:(相关课程推荐:css视频教程)staticpublicclassAddS

asp怎么调用css中样式

asp怎么调用css中样式asp调用外部css文件有以下三种方式:1、link链接方式在需要调用的asp文件中写入一下语句:(相关课程推荐:css视频教程)2、@import导入方式在需要调用的asp

如何在JavaWeb中用css

如何在JavaWeb中用css一、css概念:CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效二.、好处:1.功能强大2.将内容展示和样式控制