关于横向滚动效果的demo

在项目中要实现把这排吴亦凡向左横向滚动。

image.png

根据实现的原理我写了一个demo.代码如下。

<title>横向滚动demo</title>
<style>
    .bigBox {
        height: 500px;
        width: 600px;
        border: 1px solid black;
    }
    .roll {
        width: 100%;
        height: 50%;
         overflow: hidden;
        animation: moving 10s linear infinite;
        /*引用动画
animation: moving 10s linear infinite; /*引用动画*/
    }
    @keyframes moving {
        form {
            transform: translateX(0);
        }

        to {
            transform: translateX(-100%);
        }
    }
    .itme1 {
        float: left;
        height: 100px;
        width: 80px;
        background: orange;
        margin-right: 20px;
    }
    .bigBox:hover .roll {
        animation-play-state: paused;
        /*鼠标经过暂停动画*/
    }
</style>
<div class="bigBox">  //最外面盒子
    <div class="roll">//整块移动的盒子
        <div class="itme1">嘻嘻</div>
        <div class="itme1">哈哈</div>
        <div class="itme1">嘿嘿</div>
        <div class="itme1">吼吼</div>
    </div>
</div>

效果图如下

image.png

这样一看就很丑对不对，超出了父容器，那么我们加上，以下代码。在我们的最大的父容器加上
.bigBox {
height: 500px;
width: 600px;
margin-left: auto;
margin-right:auto;
border: 1px solid black;
overflow: hidden;
}

完事，路过的大神随意指教。