css实现横向滚动通知基于项目需要滚动通知，利用纯css实现横向滚动通知。注意：是横线滚动通知。 HTML代码： cs

基于项目需要滚动通知，利用纯css实现横向滚动通知。

注意：是横线滚动通知。

HTML代码：

<div class="horMove" style="display: flex;">
    <div style="margin-right: 40rpx;" v-for="(item,i) in List" :key="i">
	<span class="item">{{i}}+{{item}}</span>
    </div>
</div>

css代码：

.horNotice {
    position: relative;width: 100%;margin: 0 auto;overflow: hidden;white-space: nowrap;height: 40px;
}
.horNotice .horMove {
    position: absolute;top: 0;left: 100%;white-space: nowrap;animation: moveAniHor 40s linear infinite normal;
}
.horNotice .horMove .item {
    font-size: 16px;color: red;
}
@keyframes moveAniHor {
    0% {left: 100%;}
    50% {left: 0;}
    100% {left: -100%;}
}

写的不好，请大加轻喷！！！