CSS動畫實現滾動播放

通過CSS3動畫實現內容在特定區域滾動播放，當鼠標指上去的時候停止滾動

這里是ul列表內容總共十張圖片，但是為了播放的連續性，又復制了一份li，這樣就不會出現間斷

通過animation-play-state:paused實現鼠標指上去停止滾動播放

給ul列表加了display：flex讓li橫向排列

說明：CSS里設置的100%時候向左移動的1200px是原來的一份ul的寬度，也就是下面10個li的總寬度

 

HTML代碼部分

<div id="medialist" class="medialist">
                        <ul id="media">
                            <li><a href="javascript:;"><img src="img-shouye/15584288435189.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15572118197009.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576901324.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576575982.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576232618.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575784042.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575355299.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574954387.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574552475.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574162281.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15584288435189.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15572118197009.png" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576901324.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576575982.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518576232618.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575784042.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518575355299.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574954387.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574552475.jpg" alt=""></a></li>
                            <li><a href="javascript:;"><img src="img-shouye/15518574162281.jpg" alt=""></a></li>
                        </ul>
                    </div>

CSS代碼部分

#media{
    animation:rolling 20s infinite linear;
}
#media:hover{
    animation-play-state:paused;
}
@keyframes rolling{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-1200px);
    }
}

頁面顯示