PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

奋力向前
奋力向前 原创
2021-08-27 14:16:18 6619浏览

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

推动轮播实现效果图如下

12.gif

首先写Html部分,你可以理解这个div标签,如果你写CSS或者JS的时候可以用到这几个div标签,<div id="container">就是 一个<code>IDcontainerdiv,先不说多,下面给大家代码示例。

div id="container">
<div id="screen">

id="screen" 这个可以给div标签那个块状设置属性,比如 宽、高、颜色、等等。<a href="#">href</a>在是CSS代码的一种意思是指定超链接目标,<img> 标签的src属性是必需的。它的值是图像文件的URL,也就是引用该图像的文件的的绝对路径或相对路径。

a href="#"用法

<a href="#" onclick="window.close()"></a>

分类

内部连接:<a href="#/URL">name</a>

锚记:<a name="object-name">name</a><a>name</a>

外部链接:<a href="URL">name</a>建立一个以name为表象的网址链接。

链接说明文字:<a href="/" title="链接说明">...</a>

img src=""用法

图片和HTML文本在同一目录下:例如index.htmlimg.jpg

<img src="img.jpg">

图片和HTML不在同一目录下:  图片img.jpg在文件夹images中,index.htmlimages文件夹在同一个目录下

 <img src="images/img.jpg">

图片img.jpg在文件夹images中,index.htmlcontroller文件夹中,imagescontroller文件夹在同一个目录下

 <img src="../images/img.jpg">

将图像宽度和高度分别设置为 200 像素:<img>标签的heightwidth属性设置图像的尺寸。

<img src="#"    style="max-width:90%" width="200" >

html完整代码


ok,写完html编辑代码,接下来使用css写编辑

用内外边距均设置为0px,再来screena标签设置为【左浮动】并且设置动画属性,周期为1s并且无限循环。

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

代码效果

微信截图_20210827140404.jpg

设置container宽度高度均为200px(与图片宽度相同),并且将溢出部分隐藏起来。

在并排五张图的直线上,以每张图左下角为坐标点,其横坐标分别为0px200px400px600px800px

@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)}
}

效果代码

12.gif

ok,完成css代码

完整代码



	



【完】

推荐学习:HTML/CSS视频教程

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
上一条:一文讲解html中怎么使用SVG实现画走势图(分享代码) 下一条:用HTML/CSS制作有趣的动态波浪形文本行

相关文章

查看更多

最新文章

查看更多