纯css3实现滚动的公告

最新推荐文章于 2024-01-10 14:12:40 发布

原创

最新推荐文章于 2024-01-10 14:12:40 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5 #css3 #前端

本文通过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 {
    0% {left: 100%;}
    50% {left: 0;}
    100% {left: -100%;}
}

第二版：横向多条上下切换滚动。。。。。。&nbs