css如何设置轮播速度,css轮播图如何实现？

在往期文章小编介绍过 JS 如何实现轮播图。那么这篇文章我们来介绍另一种方法：CSS 轮播图如何实现。

实现效果

实现思路

用 CSS 实现图片轮播主要是用到 CSS3 animation 属性和 @keyframes。首先将要进行轮播的图片放入一个 div 内，此 div 的宽度设置为多张图片宽度的总和。在此 div 外再设一个 div，将此 div 的宽高设置为一张图片的宽高，并将 overflow 设置为 hidden。

随后设置动画属性，此处轮播总共有四张图片，所以添加四个动画阶段，0%-20% 是第一张图片的动画阶段，20%-25% 是停留阶段，以下以此类推。

具体代码

CSS如何实现轮播图 - 编程狮(w3cschool.cn)

div{

width: 300px;

height: 168px;

overflow: hidden;

}

#lunbotu{

width: 1200px;

animation: lunbotu 6s linear ;/*lunbotu为动画名称，此动画持续6s，速度相同*/

}

#lunbotu>img{

float: left;

width: 300px;

}

@-webkit-keyframes lunbotu{

0%,20%{

margin-left: 0;

}

25%,45%{

margin-left: -300px;

}

50%,70%{

margin-left: -600px;

}

75%,100%{

margin-left: -900px;

}

以上就是 CSS 轮播图如何实现的全部内容。更多 CSS 学习请关注 w3cschool 官网。

css如何设置轮播速度,css轮播图如何实现？相关推荐

css编程设置网页背景,网页中cssbackground背景图和背景颜色的设置方法
CSS 背景这里指通过CSS对对象设置背景属性,如网页中通过CSS设置背景各种样式. Css background背景作用:设置纯色背景.背景background可以设置对象纯色的背景颜色,设置图为背 ...
php+jq+添加css,jquery设置内联样式css()
jquery设置内联样式css() 设置内联样式css() .box1 { width: 300px; height: 300px; background-color: wheat; position ...
php边框圆角,css如何设置圆角边框？css设置圆角边框的方法(图文)
css如何设置边框?很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角边框比如按钮之类的,那么,我们该怎么来设置圆角边框呢?本篇文章将给大家来介绍一下css设 ...
html怎么改无序图标,css怎么设置无序列表？css的列表样式总结
css怎么样设置无序列表的样式你知道吗?这里有无序列表的详细应用,去掉这些图标之类的,还介绍了去掉小圆点给添加的图片的介绍,大家可以自己试试看.现在就让我们一起来看看这篇文章吧首先我们先来看看无序列 ...
css 边框设置成不透明,css中如何设置半透明边框？
可以参考以下我的这个代码: XXX:{ border: 5px solid rgba(XXX, XXX, XXX, 0.5) } 其中第一个XXX是你选择的需要半透明的元素接下来的XXX是你想要半透 ...
css怎样设置li分栏,css怎么对文字分栏
css中可利用columns属性或者column-width和column-count属性来对文字进行分栏,只需要给文字元素添加"columns:栏宽度栏数;"或者"c ...
css表格设置行列的颜色,CSS：为表格中的选定行设置颜色
我需要将以下功能添加到我的表中:当用户单击某行(选择它)时,该行用颜色#FFCF8B标记(与hover相同).我试过#newspaper-b tbody tr.selected td,但它不起作用.C ...
css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
css中设置文字环绕图片,css 设置文字环绕图片
要达到的效果是可以环绕图片最近做的一个项目,有一个具体的要求,是要完成文字对图片的环绕效果,其实不是很难:来做一份随笔,记录一下该做法,大家有什么好的实现方式,也可以互相探讨一下. 这是我自己写的一 ...

css如何设置轮播速度,css轮播图如何实现？

css如何设置轮播速度,css轮播图如何实现？相关推荐

最新文章

热门文章