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

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

推动轮播实现效果图如下

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

就是 一个ID为container的div，先不说多，下面给大家代码示例。div id="container">
<div>
<p style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:26px"><code>id="screen"</code> 这个可以给<code>div</code>标签那个块状设置属性，比如 宽、高、颜色、等等。<code>@#@#@#@#@#@#@#@#@#@0</code></p>
<p>锚记：<code>@#@#@#@#@#@#@#@#@#@1</code></p>
<p>外部链接：<code>@#@#@#@#@#@#@#@#@#@2</code>建立一个以<code>name</code>为表象的网址链接。</p>
<p>链接说明文字：<code>@#@#@#@#@#@#@#@#@#@3</code></p>
<h2>
<code>img src=""</code>用法</h2>
<p>图片和<code>HTML</code>文本在同一目录下：例如<code>index.html</code>和<code>img.jpg</code></p>
<pre class="brush:php;toolbar:false"><a></a>
图片和HTML不在同一目录下：  图片img.jpg在文件夹images中，index.html和images文件夹在同一个目录下
@@##@@
图片img.jpg在文件夹images中，index.html在controller文件夹中，images和controller文件夹在同一个目录下
 @@##@@
将图像宽度和高度分别设置为 200 像素：标签的height和width属性设置图像的尺寸。
 @@##@@
html完整代码
@@##@@
ok,写完html编辑代码，接下来使用css写编辑
用内外边距均设置为0px，再来screen中a标签设置为【左浮动】并且设置动画属性，周期为1s并且无限循环。
<div>
<div>
<a>@@##@@</a>
<a>@@##@@</a>
<a>@@##@@</a>
</div>
<p>代码效果<br></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a>
													<p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<p><img></p>
<p>设置<code>container</code>宽度高度均为<code>200px</code>（与图片宽度相同），并且将溢出部分隐藏起来。</p>
<p>在并排五张图的直线上，以每张图左下角为坐标点，其横坐标分别为<code>0px</code>，<code>200px</code>，<code>400px</code>，<code>600px</code>，<code>800px</code></p>
<pre class="brush:php;toolbar:false">*{
	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视频教程

	<title></title><style>
*{
	margin: 0px;
	padding: 20px;
}
#screen a{
	animation: donghua 1s infinite;
	float: left;
}

@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)}
}
</style><div>
<div>
<a>@@##@@</a>
<a>@@##@@</a>
<a>@@##@@</a>
</div>

</div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！