如何使用純CSS3實現圖片輪播的效果

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於如何使用純CSS3實現圖片輪播的效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">*{     margin: 0;    padding: 0;     text-decoration: none;}ul{    list-style: none;}ul li{    width: 400px;    height:200px;}#container{    position: relative;    width: 400px;    height: 200px;    overflow: hidden;/*隱藏溢出的圖片*/}.pic{    width:1600px;/*4張圖的寬度*/    position: absolute;/*基於父容器進行定位*/    left:0;    animation-name: carousel;    animation-duration: 12s;    animation-iteration-count: infinite;/*//動畫調用可以簡寫*/}@keyframes carousel {    0%,30%{        left: 0;    }    35%,65%{        left: -400px;    }    70%,99%{        left: -800px;    }    100%{        left: -1200px;    }   }.pic li{    float: left;    background: #5dd94e;}.pic li img {    width: 400px;    height: 200px;}</style><body><p id="container">    <ul class="pic">        <li><a href="javascript:;">111</a></li>        <li><a href="javascript:;">222</a></li>        <li><a href="javascript:;">333</a></li>        <li><a href="javascript:;">111</a></li><!-- 複製第一張 -->    </ul>        </p>   </body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.