4.用动画animation来实现轮播图

要实现轮播图可以使用动画，但是animation动画不支持ie9及以下ie浏览器。所以不能用于门户网站，但是移动端可以随意使用。

1.要实现这样的效果，有图片，有文字，还有下面的小圆点。

2.代码实现如下

<div class="box">
<div class="imgText">
<div class="img">
<img src="./img/1.jpg">
<img src="./img/2.jpg">
<img src="./img/3.jpg">
<img src="./img/4.jpg">
<img src="./img/1.jpg">
<!-- 这块写成图片1作为第五张图片，只是为了给第一张图片一个过度，在第二次及以后的轮播时出现， -->
</div>
<div class="toutiao">
<h3>今日头条1</h3>
<h3>今日头条2</h3>
<h3>今日头条3</h3>
<h3>今日头条4</h3>
<h3>今日头条1</h3>

</div>
</div>
<div class="btn">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

css样式如下：

/*图片的动画帧*/
@keyframes run1{
0%{
transform: translateX(0px);
}
20%{
transform: translateX(0px);
}
25%{

transform: translateX(-800px);

                                 /*我这块的宽度就是图片的宽度*/

}

45%{

                                /*这块25%到45%都是相同的位置，目的是让图片在轮播的时候有个停顿，在这张图片上面停几秒，再下一个图片移动。*/

transform: translateX(-800px);
}
50%{
transform: translateX(-1600px);
}
70%{
transform: translateX(-1600px);
}
75%{
transform: translateX(-2400px);
}
95%{
transform: translateX(-2400px);
}
100%{
transform: translateX(-3200px);
}
}
/*文字的效果的动画帧*/
@keyframes run2{
0%{
transform: translateY(0px);
}
20%{
transform: translateY(0px);
}
25%{
transform: translateY(-36px);
}
45%{
transform: translateY(-36px);
}
50%{
transform: translateY(-72px);
}
70%{
transform: translateY(-72px);
}
75%{
transform: translateY(-109px);
}
95%{
transform: translateY(-109px);
}
100%{
transform: translateY(-145px);
}
}


/*按钮小圆点的轮播 的动画帧*/
@keyframes runSpan1{
0%{
background: white;
}
20%{
background: white;
}
25%{
background: gray;
}
100%{
background: gray;
}


}


@keyframes runSpan2{
0%{
background: gray;
}
20%{
background: gray;
}
25%{
background: white;
}
45%{
background: white;
}
50%{
background: gray;
}
100%{
background: gray;
}


}


@keyframes runSpan3{
0%{
background: gray;
}
45%{
background: gray;
}
50%{
background: white;
}
70%{
background: white;
}
75%{
background: gray;
}
100%{
background: gray;
}
}


@keyframes runSpan4{
0%{
background: gray;
}


70%{
background: gray;
}


75%{
background: white;
}
95%{
background: white;
}
100%{
background: gray;
}
}


h3,body{
margin: 0;
padding: 0;
}
.box{
width:800px;
margin: 0 auto;
text-align: center;
}
.imgText{

position: relative;

                    /*给放图片的div的父级div设置overflow：hidden；

                       其实这个轮播图是排成一行的，所有的图片都跟在第一张的后面，只是被hidden了，然后用户就看不见了，。这样就根据动画帧使得图片一个个沿着x轴向负方向移动，每次移动一个图片宽度的距离*/

overflow: hidden;
width: 800px;
height: 500px;
}
.img::after{
content: "";
display: block;
clear: both;
}
.img{
/*给这个,给img图片的父级div的class .img设大点宽度（这个宽度就是5张图片的宽度总和），图片设置小宽度，并设置下面的图片float.就看不见后面的图片的了*/
width: 4000px;
}
.imgText img{
width:800px;
height: 500px;
float: left;
}

.toutiao{
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
width: 100%;

}
h3{
background: rgba(0,0,0,0.5);
width: 100%;
padding: 5px 0;
color: white;
}
.btn{
margin-top: 20px;
}
.btn>span{
display: inline-block;
width: 7px;
height: 7px;
border: 1px solid gray;
background: gray;
margin: 0 7px;
border-radius: 100%;


}

.img{

                        /*调用动画帧实现动画效果*/

animation: run1 10s 0s infinite linear;
}

/*文字的轮播*/
.toutiao{
height: 32px;
overflow: hidden;
}

.toutiao>h3{

                     /*调用动画帧实现动画效果*/

animation: run2 10s 0s infinite linear;
}


/*按钮的*/

.btn>span:nth-child(1){

                         /*调用动画帧实现动画效果*/

animation: runSpan1 10s 0s infinite linear;
}
.btn>span:nth-child(2){
animation: runSpan2 10s 0s infinite linear;
}
.btn>span:nth-child(3){
animation: runSpan3 10s 0s infinite linear;
}
.btn>span:nth-child(4){
animation: runSpan4 10s 0s infinite linear;
}