css@keyframe的轮播图效果实现

今天想用css做一个轮播效果图,在网上看了很久,发现大多数说的都不是很清楚,所以想把自己的一些心得记录下来.

首先要理清思路,要怎样实现一个轮播效果呢?说白了,我们看到的视图可以理解为一个相框,图片依次从相框中路过,就是这样一个效果.

所以首先,我们设置一个div作为相框,设置它的长宽.

然后设置图片的长宽, 我们可以理解为图片的整体是这个相框的n倍,每次相框中露出的图片都是它的1/n.

最后设置animation和@keyfirame的值就可以,我先把代码粘贴上来  然后在仔细记录解答:

html:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>


</div>

css:

div {
  position: relative;
  width: 600px;
  height: 200px;
  overflow:hidden;
}


div ul {
  position:relative;
  width: 400%;
  height: 100%;
  overflow:hidden;
  animation:myFirst 12s infinite;
  animation-timing-function: cubic-bezier(0,0,0.1,1);
  animation-fill-mode:backwards;
  margin:0;  //取消边距   我是在chrome浏览器下操作的  出现了一个上下边距  所以这个是用来取消的  下面我会说下是怎么回事  
}
div ul li{
  position:relative;
  width:25%;
  height:100%;
  float:left;
  list-style: none;
}


div ul li:nth-child(1){
  background-color:red;
}


div ul li:nth-child(2){
  background-color:green;
}


div ul li:nth-child(3){
  background-color:pink;
}


div ul li:nth-child(4){
  background-color:blue;
}


@keyframes myFirst{
  0%{
    left:0%;
  }
  
  25%{
    left:-100%;
  }
  
  50%{
    left:-200%;
  }
  
  75%{
    left:-300%;
  }
  
  100%{
    left:0%;
  }
}


input{
  position:relative;
  display:none;
}

div就是相框,ul就是所有图片排列成一行的样子,因为要在一行,所以在ul中我们加了左浮动.因为ul整体的图片长于相框,所以我们提前在其中加上overflow避免溢出.

因为这次设置的position属性全是relative  所以 子元素的长宽都是按照父元素的比例来的  

在最后设置下animation与@keyframe的相关属性数值就好了.

主要的坑我觉得还是思路要理清楚  当然我的小师傅告诉我 如果实现轮播效果 还是js更好一些  因为这个出现了一个状况就是设置轮回播放的时候   会迅速蹦到第一张图片  不流畅  我会在研究研究  然后发出来的.

另外我上面提到ul出现了一个外边距   是chrome自带的一个属性值  在以前的时候  往往大家会直接用* { padding: 0; margin: 0; border: 0; } 来强制霸道的将所有都设置为0 但是这样往往在自己做其他的页面时候不会好看 所以统一的一

般会引用Normalize.css但是现在基本没有自己纯写的页面 都会引入包 所以这个问题基本是已经调试过的 不用担心 知道就可以了