通过css3实现轮播功能

一，前言

以前我们实现轮播图片的效果都是通过js内部的底层的代码去实现图片轮播，虽然这种方法相比其他的麻烦，但是很严谨，不容易出现大问题，但是还是要根据用户实际的要求来看，有时候可以用一些其他的方法，现在我介绍一种方法，用纯CSS3代码实现一个轮播效果

二，写法

html部分

<div class="wapper">
		<div class="wapper_box">
			<ul>
				<li class="lis1">
					<a><img src="img/itme1.jpg"></a>
				</li>
				<li class="lis2">
					<a><img src="img/itme2.jpg"></a>
				</li>
				<li class="lis3">
					<a><img src="img/itme3.jpg"></a>
				</li>
				<li class="lis4">
					<a><img src="img/itme4.jpg"></a>
				</li>
			</ul>
			<div class="wapper_pess">
				
			</div>
		</div>
	</div>

我这里设置了四张图片，分别放入列表里面，给每个li加了个名字，为之后的运动做准备，然后最后设置了一个进度条

css布局

html,body,div,ul,li,a,img{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}


		html,body{
			width: 100%;
			height: 100%;
		}

		body{
			background-image: linear-gradient(#29f9f0 0% , #000 80%);
		}
        
        .wapper{
        	width: 800px;
        	height: 100%;
        	margin: 0 auto;
        }

        .wapper_box{
        	position: relative;
        	width: 800px;
        	height: 500px;
        	margin: 0 auto;
        	border: 2px solid #ff55cc;
        }
        .wapper_box ul{
        	position: relative;
        	width: 100%;
        	height: 100%;
        	overflow: hidden;
        }

        .wapper_box ul li{
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%
        }

        img{
        	width: 100%;
        	height: 100%
        }

我这里设置了一个大小为800*500的div，然后让其居中显示，然后让其他的所有的元素全部定在一个地方

轮播动画

.wapper_box ul li.lis1{
            animation: check1 20s infinite;
        }
        @keyframes check1{
          0%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          24%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
		  25%{
          	left: -800px;
          	opacity: 0;
          	z-index: 0;
          }
          50%{
          	left: 0px;
          	opacity: 0;
          	z-index: 0;
          }
          75%{
          	left: 0px;
          	opacity: 0;
          	z-index: 0;
          }
          100%{
          	left: 0px;
          	opacity: 0;
          	z-index: 0;
          }
        }

        .wapper_box ul li.lis2{
            animation: check2 20s infinite;
        }
        @keyframes check2{
		  0%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
		  25%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          49%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          50%{
          	left: -800px;
          	opacity: 0;
          	z-index: 0;
          }
          75%{
          	left: 0px;
          	opacity: 0;
          	z-index: 0;
          }
          100%{
          	left: 0px;
          	opacity: 0;
          	z-index: 0;
          }
        }
        .wapper_box ul li.lis3{
            animation: check3 20s infinite;
        }
        @keyframes check3{
		   0%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
		  25%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
          50%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          74%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          75%{
          	left: -800px;
          	opacity: 0;
          	z-index: 0;
          }
          100%{
          	left: 0px;
          	opacity: 0;
          	z-index: 0;
          }
        }
        .wapper_box ul li.lis4{
            animation: check4 20s infinite;
        }
        @keyframes check4{
		  0%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
		  25%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
          49%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
          50%{
          	left: 0;
          	opacity: 0;
          	z-index: 0;
          }
          75%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          98%{
          	left: 0;
          	opacity: 1;
          	z-index: 1;
          }
          99%{
          	left: -800px;
          	opacity: 0;
          	z-index: 0;
          }
        }

我这里通过获取四个li的名字，再通过关键帧动画，给每个li的图片进行切换

进度条

 .wapper_box .wapper_pess{
        	position: absolute;
        	left: 0;
        	bottom: 0;
        	height: 5px;
        	width: 0;  
            background-color: rgba(0,25,25,.9);
            z-index: 2;
            animation: pess 20s infinite;
        	      
        }
        @keyframes pess{
            0%{
            	width: 0px;
            }
            85%{
            	width: 100%;
            }
            95%{
            	width: 0px;
            }
            100%{
            	width: 0px;
            }
        }

样式展示