CSS实现横向图片滚动播放

最新推荐文章于 2024-06-22 16:00:00 发布

风下森林

最新推荐文章于 2024-06-22 16:00:00 发布

阅读量3.9k

点赞数 4

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44347152/article/details/105252179

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS实现横向图片滚动播放

以下示例代码拷走即可放到html中即可查看滚动效果:(仅供学习参考),核心代码查看CSS部分

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width,user-scalable=no" name="viewport">
</head>
<style type="text/css">
    ul li {
        margin-top: 20px;
    }

    h4 {
        text-align: left;
    }

    hr {
        width: 100%;
        color: #987cb9;
        SIZE: 1px
    }

    header {
        text-align: center;
        background-color: #00b4ff;
    }

    footer {
        text-align: center;
        background-color: #00b4ff;
    }

    * {
        margin: 0;
        padding: 0;
    }

    #wrap {
        width: 100%;
        height: 500px;
        border: 1px solid #000;
        position: relative;
        overflow: hidden;
    }

    #list {
        position: absolute;
        -webkit-animation: 10s move infinite linear;
        width: 200%;
    }

    #list li {
        list-style: none;
        float: left;
    }

    @-webkit-keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: -500px;
        }
    }

    @keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: -500px;
        }
    }

    #wrap:hover #list {
        -webkit-animation-play-state: paused; /*动画暂停播放*/
    }

</style>
<body style="background:#f3f3f4;">
<header>
    <H2 align="center">CSS实现横向图片滚动播放</H2>
    <HR>
</header>
<nav>
</nav>
<article>

    <div id="wrap">
       <ul id="list">
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"></li>
        </ul>

    </div>

</article>
<footer>
   XXXXXXXXXXXXXXXXXXXXX
</footer>
</body>
</html>