[武汉|首席弟子]JS-孟晨|2018年08月03日的日报-技能树.IT修真院

发表于： 2018-08-03 22:44:55

1 613

今天完成的事情：制作轮播图，还是跟制作响应式导航栏一样进行学习

这是做出来的效果

这是我轮播图的结构

其中这个部分是图片区

然后这里是轮播焦点（就是下面播到哪张图的5个小点）

然后，这个首先是给大盒子设置相对定位和宽度占满屏幕，

然后我这次是淡进淡的轮播所以设置的是透明，通过动画效果变出来

然后animation-timing-function：linear ，设置动画从头到尾都是相同速度变化

animation-name：fade，这里是设置动画名称为fade，fade是为了设置@keyframes 是用，fade可以设置其他名称

animation-iteration-count：infinite；这里是设置动画效果无限循环

background-size：100%；因为我轮播图的图片是是用的背景图片所以这个属性是为了自适应设置的

顺便这里因为我是设置的背景图片，所以设置了padding来撑起内容

然后继续往下，这里设置了轮播焦点（就是下面播到哪张图的5个小点）的样式

因为需要保证显示在最上层所以设置了z-index

然后因为需要跟着图片一起变化所以设置了动画效果

然后一起设置动画效果，共20s变化，然后按百分比来慢慢从透明变到显示，再变透明

.header-slider-item,.header-focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}