CSS3 slider

佚名 7年前 (2019-04-18) 随笔 1597人围观抢沙发百度已收录

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
  
    <title>CSS3 Slider</title>  
    <style type="text/css">  
        .sliderBox{height:100%;position:relative;overflow: hidden;}  
        .slider{position:absolute;width:100%;height:100%;}   
        .slider li{position:absolute;top:0;left:0;width:100%;height:100%; border:solid 1px #ccc;background:#eee; }  
        .slider li:nth-of-type(2){left:100%;}  
        .slider li:nth-child(3){left:200%;}  
        .slider li img{height:80px;}  
		.slider li img.img2{height:100%;}  
        .slider li span{display:inline-block;width:120px;height:80px;}  
        
        .animate-slider{  
            animation: slider 12s linear infinite 0s alternate;  
            -webkit-animation: slider 12s linear infinite 0s alternate;  
        }  
        /*  
        @keyframes slider {  
            0% {left:0;}  
            25%{left:0;}  
            33.3%{left:-100%;}  
            66.6%{left:-100%;}  
            75%{left:-200%;}  
            100%{left:-200%}  
        }  
          
        @-webkit-keyframes slider {  
            0% {left:0;}  
            25%{left:0;}  
            33.3%{left:-100%;}  
            66.6%{left:-100%;}  
            75%{left:-200%;}  
            100%{left:-200%}  
        }  
        */  
        @keyframes slider {  
            0% {transform:translateX(0);}  
            25%{transform:translateX(0)}  
            33.3%{transform:translateX(-100%);}  
            66.6%{transform:translateX(-100%);}  
            75%{transform:translateX(-200%);}  
            100%{transform:translateX(-200%);}  
        }  
        @-webkit-keyframes slider {  
            0% {-webkit-transform:translateX(0);}  
            25%{-webkit-transform:translateX(0)}  
            33.3%{-webkit-transform:translateX(-100%);}  
            66.6%{-webkit-transform:translateX(-100%);}  
            75%{-webkit-transform:translateX(-200%);}  
            100%{-webkit-transform:translateX(-200%);}  
        }  
    </style>  
</head>  
<body>  
    <section  style="margin-top: 50px;height:300px;">  
        <div style="position:fixed;top:0;left:0;height:50px;width:100%;background: #dcc;">黑色3</div>  
  
            <div class="sliderBox">  
                <ul class="slider animate-slider">  
                    <li>
					 <a href='' ><img src="images/1.jpg" alt=""/></a> 
					 <span>jjjjjoooooooooooooooooo
					 jjjj</span>
		
					</li>  
                    <li>
					<a><img class='img2' src="images/2.jpg" alt=""/>
					</a>
					<span>hh777777777777</span>
					</li>  
                  
				  <li>
					<a><img src="images/3.jpg" alt=""/></a>
					<span>hh777777777777h</span>
					</li>  
                </ul>  
            </div>  
   
    </section>  

</body>  
</html>