CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果)

html-css024

CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果),第1张

简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红、绿、蓝)的效果。

不能发视频,截图来代替吧

1.显示 轮播图1(实际轮播的第2个元素li)

2.显示 轮播图2(实际轮播的第3个元素li)

3.显示 轮播图3(实际轮播的第4个元素li)

4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)

animation-name: 规定需要绑定到选择器的 keyframe 名称。

animation-duration: 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function: 规定动画的速度曲线。

animation-delay:规定在动画开始之前的延迟。

animation-iteration-count: 规定动画应该播放的次数。

animation-direction:规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间,按照总时间的百分比分配;

以三张图片为例制作轮播图,若将最后的数值设置为100%,出现问题在于最后一张到第一张的切换没有动画;尝试给最后一张图片到第一张图片的动画时间,但是中间的切换效果是从最后一张向右滑动直到显示出第一张图,其效果反人类,不美观;但是,通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

方法与一中大致相同,唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张图片导入,会出现最后一张图片到第一张图片没有动画效果;通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

问题在于图片一直处于切换状态,中间没有停顿;