[分享]css3图片滑动效果代码

CSS3图片滑动效果提供了一种非常优美的图片展示方式，可以为网页增色不少，下面我们就来看一下如何实现这个效果。.slide{ width: 400px;//设置滑动区域宽度 overflow: hid...

CSS3图片滑动效果提供了一种非常优美的图片展示方式，可以为网页增色不少，下面我们就来看一下如何实现这个效果。

.slide{
  width: 400px;//设置滑动区域宽度
  overflow: hidden;//隐藏超出部分
  position: relative;//设置相对定位
}
.slide img{
  width: 400px;//设置图片宽度
  height: 300px;//设置图片高度
}
.slide ul{
  position: absolute;//设置绝对定位
  width: 1600px;//设置滑动宽度
  animation: slide 10s infinite linear;//添加动画
}
.slide li{
  float: left;//设置浮动
}
@keyframes slide{
  0%{
    left: 0;
  }
  100%{
    left: -1200px;//滑动距离
  }
} 

代码解析：

首先，我们创建了一个类名为slide的元素，然后在该元素中嵌套了一个ul标签，并设置了该元素的宽度为400px，overflow属性为hidden，position属性为relative，这样就能够隐藏超出部分并达到相对定位的效果，同时设置一个ul标签，宽度为1600px，这是因为我们需要滑动的图片数量为4张，每张图片的宽度为400px，所以总共需要的宽度为4*400=1600px。

接下来，我们给每张图片设置了宽度400px、高度300px，并加了一个li元素包裹，li元素浮动于左侧，这样就能够使用动画来使ul不断进行左移操作，就能实现滑动效果了。

最后，使用@keyframes来创建一个名为slide的动画，在0%的时刻left为0，在100%的时候会left为-1200px，这样就能实现循环滑动了。

CSS3图片滑动效果代码就介绍到这里了，在实际应用中，我们还可以通过修改一些相关属性来实现不同的效果，欢迎大家尝试！