CSS实现文字滚动，类似京东商城公告栏

最新推荐文章于 2025-06-17 10:26:19 发布

原创

最新推荐文章于 2025-06-17 10:26:19 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #文字滚动 #公告栏 #广告栏

本文介绍了如何使用CSS的animate属性来实现简单的文字滚动效果，适用于创建类似京东商城公告栏或广告栏的功能。只需2秒即可完成一次滚动，具体实现过程详述如下。

实现文字滚动，第一时间想用swiper进行，但是需求功能较少，不需要引用外部swiper.js，直接用CSS的animate属性实现文字滚动，2秒滚动一次，实现如下:

<div class="notice">
 <ul>
 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天霸Tua动霸

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

纯css3实现滚动的公告

cs_dnm的博客

07-30

1883

纯css3实现三个版本的滚动公告前情：老板说一个好的员工都是让甲方做选择题而不是问答题。今天需要上一个公告，基于“前情”准备了三个版本。第一版：横向单条从右往左滚动。。。。。。 <div class="horNotice"> <div class="horMove"> <div class="item">！</div> <div class="item">温馨提示：2019年2月4日

html中的横向广告滚动字幕,纯css3制作无限循环横向滚动的文字广告动画

weixin_35762553的博客

06-03

1311

使用css3制作文字横向无限循环滚动的动画/**设置宽，溢出隐藏*/.marquee-outer-wrapper{overflow: hidden;width: 80%;}.marquee-inner-wrapper{background: #eee;height: 40px;font-size: 14px;color: red;line-height: 40px;margin: 0 auto;w...

参与评论您还未登录，请先登录后发表或查看评论

公告上下滚动

10-27

文字上下左右间歇性滚动，适用于网站公告板块。demo为移动端

CSS实现文字滚动，类型京东商城公告栏

测试

04-25

743

实现文字滚动，第一时间想用swiper进行，但是需求功能较少，不需要引用外部swiper.js，直接用CSS的animate属性实现文字滚动，2秒滚动一次，实现如下:<div class="notice"> <ul> <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li> <li>第2条公告第2条公告第2条公告第2...

纯css滚动公告栏目

weixin_30345577的博客

05-26

365

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { ...

HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站 (2)

有问必答，欢迎打扰，项目开发，网页设计

06-04

700

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏

文章管理系统

12-06

搜索栏新增京东商城搜索 2012年01月05日 V2.4升级包 1.新增【管理员专区】->【数据处理管理】功能，可以批量替换数据和处理因敏感词而无法正常打开网页问题 2.纠正后台文章编辑，获取编辑器图片无法获取网络图片...

css3横向无限公告消息滚动功能

thigh_d的博客

03-07

4490

css3横向滚动

css 滚动公告,用DIV+CSS布局，怎么做滚动的公告栏？

weixin_30923925的博客

08-03

561

htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

制作公告栏滚动样式的效果css

泪的结晶的博客

11-14

7226

CSS3文字滚动通知动画特效.zip

07-05

CSS3文字滚动通知动画特效是一款简单创意的css3文字广告语动画特效。

html上下循环滚动的公告栏效果

04-24

js实现的滚动公示栏效果，用于公告栏等的现实

纯CSS滚动字幕(跑马灯)

11-30

使用纯CSS实现的滚动字幕(跑马灯)，使用了 animation 和 transform 结合，移动端和PC端都可使用

html 一个漂亮的网站公告带图片和css

06-10

html 一个漂亮的网站公告带图片和css

【CSS】垂直滚动公告

Jooan的博客

01-10

939

CSS制作的垂直滚动公告，支持多条切换

css实现公告内容滚动展示

恍若c的博客

06-16

1862

实现公告栏内容滚动循环展示

纯css实现竖向公告栏无缝滚动

qq_37698249的博客

09-10

1560

通过translateY来进行滚动，滚动距离为100%，±控制方向如果出现卡顿，大部分原因是边距问题，下面给大盒子添加了padding-top，不要用margin // html <view class="bullet"> <view class="bullet_inner"> <view class="bullet_wrap"> <view class="bullet_item" a:for="{{ list }}">{{ it.

css 广告、公告。滚动文字从右到左（店铺招牌的动画），不使用marquee标签

PrimaryColor

11-14

838

效果图：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .con

公告、新闻列表-上下无限滚动（css+animation）