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

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

天霸Tua动霸

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

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： CSS 文字滚动公告栏广告栏

本文链接：https://blog.csdn.net/Andrew83/article/details/88714484

版权

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

摘要由CSDN通过智能技术生成

实现文字滚动，第一时间想用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>第

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天霸Tua动霸

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

纯css3实现滚动的公告

cs_dnm的博客

07-30

1663

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

实现文字滚动播放

WindrunnerMax

01-21

1462

实现文字滚动播放实现文字滚动播放，通过使用CSS3动画与Js控制来实现，由于使用CSS动画来控制偏移限制较多，因此通常还是使用Js来实现。实现 CSS Animation 使用CSS动画方法，使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。此方法的主要问题在于left是100%是相对于父级元素的宽度来说的，因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度。 <!DOCTYPE html> <html> <head&gt

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

公告上下滚动

10-27

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

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

测试

04-25

560

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

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

thigh_d的博客

03-07

4288

css3横向滚动

纯css滚动公告栏目

weixin_30345577的博客

05-26

308

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

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

qq_37698249的博客

09-10

1301

通过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.

html公告栏设计,原生JS实现公告栏文字横向滚动(通告栏)

weixin_34766991的博客

06-05

2657

在做APP公告滚动的时候用到，感觉还不错，码了转载地址：https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit先看下实现的效果就是红色箭头部分指向的位置,字体会从右往左进行滚动接下来看下html代码尊敬的用户，您好！感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！尊敬的用户，您好...

css3实现数字滚动效果,JS+CSS实现滚动数字时钟效果

weixin_39747383的博客

08-03

1581

本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果，这个效果一般都是用在网页开场动画以及区域的时间显示中，非常好看，动画效果也很个性，我们先来看下运行后的效果：下面就是这个滚动时钟动画的全部代码：CSS3+JS滚动数字时钟代码-脚本之家body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235,...

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

06-10

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

css_TV_公告栏

09-27

css_TV_公告栏 css_TV_公告栏

css文字左右滚动的实现（类marquee）

逝水经年的博客

07-21

1842

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ma

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

weixin_30923925的博客

08-03

496

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

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

泪的结晶的博客

11-14

7055

【CSS】垂直滚动公告

最新发布

Jooan的博客

01-10

602

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

css实现公告内容滚动展示

恍若c的博客

06-16

1708

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

css横向滚动通知

CamilleZJ的博客

06-03

4379

如下：横向滚动播报每场比赛中得冠通知实现： 1.<marquee>标签可以自动实现效果，但是已经废弃。 https://www.jianshu.com/p/6dcec8a9ea60 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee 2.css3动画 <div clas...

html语言字体上下滚动代码,div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）...

weixin_35662417的博客

05-31

2189

网站公告栏一般采用滚动形式，随着jquery的出现，特效做起来更加简单，所以目前大多数网站都有自己的公告栏目，采用文字滚动的形式，今天来分享几个垂直公告文字滚动特效，分别是全面版，常用版，以及极简版！1、jquery，公告垂直滚动，可关闭特效：(全面版)html公告滚动特效公告滚动特效公告滚动特效×CSS：#wenzilunbo{width:1100px;margin:-34pxauto30...

css实现匀速滚动公告栏

04-01

``` 这是第一条公告这是第二条公告 ...在动画结束时，ul元素的transform属性的translateY值为-180px，表示公告栏滚动了一定的距离。由于ul元素的高度为6个li元素的高度之和，所以translateY的值为-180px。