纯css3实现滚动的公告

 

 

纯css3实现三个版本的滚动公告

前情：老板说一个好的员工都是让甲方做选择题而不是问答题。

今天需要上一个公告，基于“前情”准备了三个版本。

第一版：横向单条从右往左滚动。。。。。。

<div class="horNotice">
    <div class="horMove">
          <span class="item">我们来喽，我们来喽，欢迎来到我的直播间！</span>
          <span class="item">我们来喽，我们来喽，欢迎来到我的直播间！</span>
      </div>
 </div>

.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 {