css3 无缝轮播效果小demo（轮播效果/渐隐渐现效果）

轮播效果：

DOM部分：

<div id="banner">
　　<ul>
　　　　<li><img src="./images/banner-1.jpg" alt=""></li>
　　　　<li><img src="./images/banner-2.jpg" alt=""></li>
　　　　<li><img src="./images/banner-3.jpg" alt=""></li>
　　　　<li><img src="./images/banner-4.jpg" alt=""></li>
　　　　<!--将需要轮播的图片在复制一份-->
　　　　<li><img src="./images/banner-1.jpg" alt=""></li>
　　</ul>     
</div>

CSS部分：

#banner {
    width: 18rem;
    height: 12rem;
    overflow: hidden;
}
#banner>ul{
    width: 500%;
　　/*动画：调用动画的规则名称 动画持续时间 动画过渡类型（线性） 循环次数（无限）*/
    animation: imgMove 20s linear infinite;
    /* list-style: none; */
}
/* 暂停动画 */
#banner>ul:hover{
　　/*鼠标移上让画面停止*/
    animation-play-state: paused;
    }
#banner > ul > li {
    width: 18rem ;
    float: left;
}
#banner img{
    width: 100%;
    /* background-size: 100%; */
}
@keyframes imgMove {
    /* 
　　　　第一份照片和最后一张照片是同一张，两张照片的时间加起来要和其它照片的时间一样（10%+10%=20%），
　　　　保证停顿的时间和显示的时间一致效果才好 
　　*/
    0%,10% {margin-left: 0px;}
    15%,35% {margin-left: -18rem;}
    40%,60% {margin-left: -36rem;}
    65%,85% {margin-left: -54rem;}
    90%,100%{margin-left: -72rem;}
}

 

---

 

 

---

 

 渐隐渐现效果

DOM

 

<div class="head-bg">
　　<ul>
　　　　<li><img class='head-bg-1' src="./images/header-banner-1.jpg" alt="首页"></li>
　　　　<li><img class='head-bg-2' src="./images/header-banner-2.jpg" alt="首页"></li>
　　　　<-- 赋值一份图片，再次轮播的时候不会闪烁 -->
　　　　<li><img class='head-bg-1' src="./images/header-banner-1.jpg" alt="首页"></li>
　　</ul>       
</div>

 

css

.head-bg {
　　/*一屏宽，固定宽高溢出影藏*/
    width: 1349px;
    height: 425.563px;
    overflow: hidden;
}
.head-bg>ul{
/*给脱离文档流的做参照物*/
    position: relative;
    width: 100%;
}
/* 暂停动画 */
.head-bg>ul:hover{
    animation-play-state: paused;
}
.head-bg > ul > li {
　　/*脱离文档流，让两张图片叠在一起*/
    position: absolute;
    width: 1349px ;
    float: left;
}
.head-bg img{
    width: 100%;
}
.head-bg-1{
    animation: imgMove 10s linear infinite;
}
.head-bg-2{
    animation: imgMove2 10s linear infinite;
}
@keyframes imgMove {
    0% {opacity: 1;}
    25% {opacity: 1;}
    50% {opacity: 0;}
    75% {opacity: 0;}
}
@keyframes imgMove2 {
    0% {opacity: 0;}
    25% {opacity: 0;}
    50% {opacity: 1;}
    75% {opacity: 1;}
}