在html中如何设置图片轮显,css中怎么让图片轮播？

css中让图片轮播的方法：将多个大小相同的图片横排放在一个图片中，然后在图片容器外加一个展示容器，并为图片容器添加自定义动画，在动画不同阶段设置递增的偏移值即可实现图片轮播。

css让图片轮播实现思想：

准备相同大小的多个图片

将要展示图片横排放在一个图片容器里面

在图片容器外再加一个展示容器，展示容器大小为图片大小

给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值

示例：

HTML

解析：

这里创建了三个 img 元素，img 元素外面是图片容器，图片容器外面是展示容器。

CSS

#container {

width: 400px;

height: 300px;

overflow: hidden;

}

#photo {

width: 1200px;

animation: switch 5s ease-out infinite;

}

#photo > img {

float: left;

width: 400px;

height: 300px;

}

@keyframes switch {

0%, 25% {

margin-left: 0;

}

35%, 60% {

margin-left: -400px;

}

70%, 100% {

margin-left: -800px;

}

解析：

展示容器大小和图片大小一致

图片添加 float 效果，不用考虑麻烦的 margin 问题

由于示例只有三个图片，所以添加了三个动画阶段，每一阶段都是通过设置递增的 margin-left 值达到切换的效果

设置的动画阶段(如：35%~60%)是动画停留部分，和上一阶段空余时间(如25%~35%)即为动画切换部分，各部分时间长短需要自己把控

实现效果：

在html中如何设置图片轮显,css中怎么让图片轮播？相关推荐

html中的em等于多少像素,CSS中的em运用详解，1em等于多少像素？
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
html 怎么自动让图片居中显示,css中怎样让图片居中显示？
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
php背景图片存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
html中菜单触碰变色,利用css filter实现菜单图片变色效果
需求场景在制作菜单时,未增加响应效果,往往会加入鼠标移入移出时字体和图标进行变色的效果,字体的颜色变化比较好控制,通过color便可以设置,但如果图标是使用的图片,往往要一个图标制作两份不同颜色的图 ...
html中背景不平铺怎么写,css怎么让背景图片不平铺？
在使用background属性设置背景图片时,背景图片默认是重复平铺的.css怎么让背景图片不平铺?下面本篇文章就来给大家介绍一下使用CSS设置背景图片不平铺的方法,希望对大家有所帮助. 在CSS中, ...
html5怎么让图片垂直居中显示,css中如何实现图片垂直居中显示？
css中如何实现图片垂直居中显示?下面本篇文章就来给大家介绍一下使用CSS实现图片垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.使用flex实现图片垂直居中利 ...
css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
html背景透明图片不透明,css中背景透明的图片不透明怎么解决
css中背景透明的图片不透明怎么解决一.使用滤镜解决img { background: transparent; -ms-filter: "progid:DXImageTransform. ...
怎么样在html中直接使用图片,如何在css中引用图片
如何在css中引用图片 css中引入图片一般有3种形式,1.从本地引用图片:2.从网络引用图片:3.使用base64对图片编码进行引用. 一.从本地引用图片引用本地图片时,会用相对的地址,而不是绝对 ...

在html中如何设置图片轮显,css中怎么让图片轮播？

在html中如何设置图片轮显,css中怎么让图片轮播？相关推荐

最新文章

热门文章