HTML 美化 - 文字滚动
@ Kayman · Sunday, Jul 26, 2020 · 4 分钟阅读 · 更新于 Jul 26, 2020

针对 HTML 中如何设置文字滚动的详细说明 ⑅︎◡̈︎*

 
——> 全文约 1650 字 <——
 
 
绝对是全网最通俗最详细的学习教程!一片空白的我都能学会你还在等什么!
↓    ↓    ↓    ↓    ↓    ↓    ↓    ↓
 

前两天在维护某开源社区的内容时,突发奇想要美化一下网页的文字显示效果,虽然最后通过别的方式实现了我的需求,但是在上网冲浪的时候有了意外的收获:文字滚动,特此更博,以资鼓励。

正常的文字插入代码如下:

<p>我为什么一动不动????</p>
  • 效果如下:

我为什么一动不动????

你也可以对其进行美化:

<p style="background:rgba(51, 102, 153, 0.6); color:rgba(255, 255, 255, 0.99); padding:0.1rem; padding-left:15px; padding-top: 10px; padding-bottom: 10px; border-radius:10px;">尽管如此我还是一动不动......</p> 
  • 效果如下:

尽管如此我还是一动不动......

-----------------------------------------------------

MARQUEE

HTML 的 MARQUEE 元素 ( <marquee> </marquee> ) 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

⚠️ 关于该标签对的使用,Mozilla 的开发文档上有一段标红警告:
⚠️ This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
⚠️ 意即该元素已经过时,为了网站维护和长久发展请勿继续进行使用,因此本文内容仅供参考

文字来回滚动

<MARQUEE scrollAmount=5 behavior=alternate>我可以来回滚动哈哈哈哈哈哈!!!</MARQUEE>
  • 效果如下:

我可以来回滚动哈哈哈哈哈哈!!!

文字上下左右移动

<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=left>向左移动的文字</MARQUEE>
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=up>向上移动的文字</MARQUEE>
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=down>向下移动的文字</MARQUEE>
<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=5 direction=right>向右移动的文字</MARQUEE>
  • 效果如下:
向左移动的文字向上移动的文字向下移动的文字向右移动的文字
文字躲避

<MARQUEE behavior=alternate><MARQUEE scrollAmount=5 width=150>我躲起来,你抓不到我抓不到我!!!</MARQUEE></MARQUEE>
  • 效果如下:
<MARQUEE behavior=alternate style="background:rgba(51, 102, 153, 0.6); color:rgba(255, 255, 255, 0.99); padding:0.1rem; padding-left:15px; padding-top: 10px; padding-bottom: 10px; border-radius:10px;"><MARQUEE scrollAmount=5 width=150>我躲!</MARQUEE><MARQUEE scrollAmount=7 width=150>你抓不到!</MARQUEE><MARQUEE scrollAmount=9 width=150>哈哈哈哈</MARQUEE></MARQUEE>

我躲!你抓不到!哈哈哈哈

文字从中间往两边滚动

<P align=center>
  <MARQUEE width=200 height=50>
    <FONT face=隶变-简 color=#f77e76 size=5>
      我往左边滚动
    </FONT>
  </MARQUEE>
  <MARQUEE direction=right width=200 height=50>
    <FONT face=微软雅黑 color=#f77e76 size=5>
      我往右边滚动
    </FONT>
  </MARQUEE>
</P>
  • 效果如下:

我往左边滚动 我往右边滚动

文字从上下往中间滚动

<CENTER>
  <MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=3 direction=down height=60>
    <FONT face=隶变-简 color=#78a9cc size=5>
      我往下滚动
    </FONT>
  </MARQUEE>
</CENTER>
<CENTER>
  <MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=3 direction=up height=60>
    <FONT face=隶变-简 color=#78a9cc size=5>
      我往上滚动
    </FONT>
  </MARQUEE>
</CENTER>
  • 效果如下:
我往下滚动
我往上滚动

-----------------------------------------------------

参数介绍:

变量 说明
scrollAmount 表示速度,值越大速度越快。如果没有这个值,默认为 6 ,建议设为 1~3
width 和 height 表示滚动区域的大小,width 是宽度,height 是高度。特别是在做垂直滚动的时候,一定要设 height 的值。这样文字才能在一定的范围滚动
direction 表示滚动的方向。默认为从右向左:←←← 。可选的值有 right ; down ; up。滚动方向分别为:right 表示 →→→ ,up 表示 ↑ ,down 表示 ↓
scrollDelay 控制速度,默认为 90 ,值越大,速度越慢。通常不需要设置
behavior 控制属性,默认为循环滚动,可选的值有 alternate ( 交替滚动 ) ; slide ( 幻灯片效果,指的是滚动一次,然后停止滚动 ) ,默认值为 scroll
hspace 设置水平边距
loop 设置 marquee 滚动的次数。如果未指定值,默认值为 −1 ,表示 marquee 将连续滚动

参考链接:

HTML 元素参考 - MARQUEE

本文结束。

HTML
保存为图片
0

Kayman 的博客
你可以碌碌一生,但不能庸碌无为。

ByteDance (1) Flink (1) Git (6) GitHub (1) HTML (2) Hugo (3) Kafka (1) Markdown (1) Marp (1) Redis (1) Shopee (4) shortcodes (1) Universe (1) 十维时空 (1) 可爱 (1) 后端 (7) 多维空间 (1) 奇奇怪怪 (1) 字节 (1) 字节跳动 (1) 旅行 (1) 欧路词典 (1) 毕业 (1) 毕业旅行 (1) 破解 (1) 符号 (1) 腾讯 (2) 虾皮 (4) 面试 (8)

© 2020 - 2022 | Kays Blog ⑅︎◡̈︎*

Powered by Hugo with Author Kayman.

友链 :💬 I will put some of my friends' and technical Dalaos' blogs HERE so as to encourage myself (umm though it may not work hahah~) 📣 😤

⑅︎◡̈︎*

My BEST FRIEND in PKU, so l list her at the first row.

I modify my front-end framework from him. List him here so as to thx him~

憨批の自我介绍

🍺 Kayman' Blog 🏎️

这个博客用来记录一些生活&学习上的事情 ⑅︎◡̈︎*

一名憨憨CRUD专家,现就职于Shopee ,数据鸡架的 Flink 方向

业余时间只剩下 羽毛球🏸️|篮球🏀|德州♠️|打游戏🎮|肥宅🥤 了……

-- 2022 年 02 月 08 日更新 --

一名憨憨CRUD专家,现即将从就读于 🏫 北大青鸟毕业

业余时间会做开源和一些别的项目啥也不会做

目前准备去1075了,顺便捣鼓些Geek Proj,养老的同时培养点兴趣驱使方向。


在北大最好的朋友是 江栽花 ,我们一个负责吹牛皮一个负责去 GayHub 偷别人的优秀代码,完成过很多烂番茄项目,搞过一段时间的磕盐。

尽管也没人认识我们,但是还是客套地说一下

-- 2021 年 06 月 18 日更新 --

技术栈 & Project

主要的技术栈是:

  • 目前工作的方向是 Flink ˙Ꙫ˙

  • Java ˙Ꙫ˙

  • Python ˙Ꙫ˙

  • SQL ˙Ꙫ˙

  • 一点点的 html + css + js 🤏

  • 一点点的 shell 🤏


做过啥:

(其实啥也没做过 ⑅︎◡̈︎*)

Share Musics   ⑅︎◡̈︎*

每日一言