纯css3实现滚动的公告

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

淼จุ๊บ

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

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html html5 css3 前端

本文链接：https://blog.youkuaiyun.com/cs_dnm/article/details/107540344

本文通过CSS3展示了三种不同的滚动公告实现：横向单条从右往左滚动，横向多条上下切换滚动，以及纵向单条从下往上滚动。在创建这些效果时，特别注意了字母和标点的垂直排布问题，通过手动换行确保内容正确展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯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.47元/天解锁文章