鍍金池/ 問(wèn)答/HTML5  HTML/ CSS3輪播圖的效果

CSS3輪播圖的效果

問(wèn)一下我的輪播圖為啥每次都會(huì)回滾,是不是最后一幀設(shè)置的有問(wèn)題?
是不是應(yīng)該覆蓋第一張圖?
`<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<title>Document</title>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 520px;
        overflow: hidden;
        margin: 100px auto;
    }

    ul {
        width: 3300px;
        height: 280px;
        animation: move 20s linear 0s infinite normal;
    }

    ul li {
        list-style: none;
        width: 520px;
        height: 100%;
        float: left;
    }

    @keyframes move {
        0% {
            margin-left: 0;
        }

        9% {
            margin-left: -520px;
        }
        18% {
            margin-left: -520px;
        }

        27% {
            margin-left: -1040px;
        }
        36% {
            margin-left: -1040px;
        }
        45% {
            margin-left: -1560px;
        }
        54% {
            margin-left: -1560px;
        }
        63% {
            margin-left: -2080px;
        }
        72% {
            margin-left: -2080px;
        }
        81% {
            margin-left: -2600px;
        }
        90% {
            margin-left: -2600px;
        }
        100% {
            margin-left: 0;
        }


    }
</style>

</head>

<body>

<div>
    <ul>
        <li>
            <img src="http://img.alicdn.com/tfs/TB112V3tpGWBuNjy0FbXXb4sXXa-520-280.jpg_q90_.webp">
        </li>
        <li>
            <img src="https://img.alicdn.com/simba/img/TB1k54Wr1uSBuNjSsziSuvq8pXa.jpg">
        </li>
        <li>
            <img src="https://img.alicdn.com/simba/img/TB1g.owtkSWBuNjSszdSuveSpXa.jpg">
        </li>
        <li>
            <img src="https://aecpm.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg">
        </li>
        <li>
            <img src="http://img.alicdn.com/tfs/TB1YIf6oGmWBuNjy1XaXXXCbXXa-520-280.jpg_q90_.webp">
        </li>
        <li>
            <img src="http://img.alicdn.com/tfs/TB112V3tpGWBuNjy0FbXXb4sXXa-520-280.jpg_q90_.webp">
        </li>
    </ul>
</div>

</body>

</html>`

回答
編輯回答
風(fēng)畔

你最后一幀margin-left: 0;,所以圖片一輪滾動(dòng)完后,圖片就會(huì)回滾;
如果你用css3做,那就從右往左,用0%-50%,然后設(shè)置成左往右,用50%-100%;這樣的話就不會(huì)出現(xiàn)6張圖一起回滾的結(jié)果;

2017年10月27日 11:17
編輯回答
我以為

左--右
0% {margin-left:0}; 100% {margin-left:-2600px;}
左-右-左
0% {margin-left:0}; 50%{margin-left:-2600px;} 100% {margin-left:0;}

建議: 如何實(shí)現(xiàn) CSS 無(wú)縫輪播圖?

2017年10月3日 21:34