anime.js 图片位移动画_HTML & CSS | 实现图片轮播效果

你们要的技术贴又双叒叕来了~

这次是利用html&css实现图片轮播效果

话不多说 先上效果图

下面是具体步骤了 人家认真学习嗷~

一、搭建基本结构，将四张图片插入网页

为图片标签，在标签内设置了图片的高度和宽度，这时四张图片只是简单地排列在网页中。

效果如图：

二、关于css选择器

关于css选择器有多种，如：标签选择器、类选择器、ID选择器、全局选择器......网页中可通过使用各种选择器为元素设置CSS规则。

这里使用类选择器来设置div的CSS规则，如图中的：

L43：

表示给div赋予了一个class属性，属性名为tv

以属性名作为选择器设置div的样式，如：

L30-36表示设置此div的样式：

宽度(width)为350像素；

高度(height)为160像素；

并设置溢出隐藏(overflow:hidden),将在此div范围以外的内容隐藏起来，让网页中只显示出一张图片；并且设置了边框(border)。

用同样的方法也可以给其他的类选择器设置样式。

效果图：

三、为图片设置动画，实现图片的轮播

L25：

animation: 8s donghua infinite;

——animation是动画标签：动画时间为8s,动画名称为donghua;模式为无限循环模式

L38-44：

translateX()表示以X轴为坐标的位移。()中的像素值表示位移大小，这里的位移大小由图片的宽度(350px)决定，默认方向为向右，加负号表示方向相反，即图片向左移动

L38：

通过@keyframes设置动画轮播，这里将整个动画时间(共8s)平均分成了四段。

0%-25%占动画的0-2s，0px位移,即显示第一张图片；

25%-50%占动画的2-4s，向左移动350个像素，即从第一张图片播放到第二张图片；

以此类推......

效果图：

四、优化动画

以上动画时间的设置会出现一个问题：图片停留的时间太短，影响网页的视觉效果，所以需要进一步通过设置动画时间段来改变图片的轮播时间和停留时间。

例：

25%-35%：向左移动350像素，图片轮播。

35%-50%：无位移，图片停留。

到这一步，网页中图片轮播效果就做好了。

当当当当~ 开头的那个效果图就大功告成了

如下图???

这次的技术贴就是这样，大家有没有学到呢

anyway，下次的技术贴不见不散鸭~

执行编辑| 侯晓东

责任编辑| 于文博