手把手教你怎么使用html+css实现轮播图效果（代码分享）-html教程-PHP中文网

之前的文章《手把手教你使用css制作一个简单的心跳效果（代码详解）》中，给大家介绍了怎么使用css制作一个简单的心跳效果。下面本篇文章给大家介绍怎么使用html+css实现轮播图效果，我们一起看看怎么做。

手把手教你怎么使用html+css实现轮播图效果（代码分享）

推动轮播实现效果图如下

首先写Html部分，你可以理解这个div标签，如果你写CSS或者JS的时候可以用到这几个div标签，

就是 一个ID为container的div，先不说多，下面给大家代码示例。div id="container">
id="screen" 这个可以给div标签那个块状设置属性，比如 宽、高、颜色、等等。href
锚记：CSS
立即学习“前端免费学习笔记（深入）”；
外部链接：建立一个以src为表象的网址链接。
链接说明文字：URL

a href="#"用法
图片和name文本在同一目录下：例如namename和name
图片和name不在同一目录下：  图片...在文件夹img src=""中，HTML和index.html文件夹在同一个目录下
@@##@@
图片img.jpg在文件夹HTML中，img.jpg在images文件夹中，index.html和images文件夹在同一个目录下
 @@##@@
将图像宽度和高度分别设置为 200 像素：img.jpg标签的images和index.html属性设置图像的尺寸。
 @@##@@
html完整代码
@@##@@
ok,写完html编辑代码，接下来使用css写编辑
用内外边距均设置为controller，再来images中controller标签设置为【左浮动】并且设置动画属性，周期为并且无限循环。

							
								
								
									WeShop唯象
									WeShop唯象是国内首款AI商拍工具，专注电商产品图片的智能生成。
								
								下载 
							
						



@@##@@
@@##@@
@@##@@

代码效果


设置height宽度高度均为width（与图片宽度相同），并且将溢出部分隐藏起来。
在并排五张图的直线上，以每张图左下角为坐标点，其横坐标分别为0px，screen，a，1s，container
*{
	margin: 0px;
	padding: 20px;
}
#screen a{
	animation: donghua 1s infinite;
	float: left;
效果代码

ok,完成css代码
完整代码
@keyframes donghua{
	0%{transform: translate(0px)}
	18%{transform: translate(0px)}
	20%{transform: translate(-200px)}
	38%{transform: translate(-200px)}
	40%{transform: translate(-400px)}
	58%{transform: translate(-400px)}
	60%{transform: translate(-600px)}
	78%{transform: translate(-600px)}
	80%{transform: translate(-800px)}
	100%{transform: translate(-800px)}
}
【完】
推荐学习：HTML/CSS视频教程


	





@@##@@
@@##@@
@@##@@