CSS动画实现滚动播放

最新推荐文章于 2024-07-31 16:59:37 发布

weixin_30706691

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量1.5k

点赞数

原文链接：http://www.cnblogs.com/zhangcheng001/p/11027828.html

版权

通过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);
    }
}