无缝滚动小练习—animation

最新推荐文章于 2024-04-18 14:30:56 发布

七彩皮皮丽

最新推荐文章于 2024-04-18 14:30:56 发布

阅读量456

点赞数

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/xiaorouer888/article/details/74943090

版权

HTML5/CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html部分

<body>
<div id="wrap">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>

css部分

<style>
*{padding: 0; margin: 0;}

#wrap{width: 500px; height: 100px; position: relative; margin: 180px; overflow: hidden;}

#list{width: 1000px; height: 100px; position: absolute; top: 0; left: 0; -webkit-animation: 5s domove linear infinite;  -ms-animation: 3s domove linear infinite;}

#list li{width: 98px; height: 98px; border: 1px solid #fff; background: black; list-style: none; float: left; color: #fff; font-size: 25px; line-height: 98px; text-align: center;}

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

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

#wrap:hover #list{ -webkit-animation-play-state: paused;}  //停止动画
</style>