最近在B站刷到很多复古风网页设计，满屏都是”欢迎光临”的跑马灯效果。这种二十年前流行的效果，现在看居然有点魔性上头？不过说真的，你知道这些文字飘来飘去的效果是用什么代码实现的吗？今天咱们就扒一扒这个上古神器——marquee标签，特别是它那些让人眼花缭乱的属性设置。
当年刚学HTML的时候，老师教我们用marquee就像现在教用div一样平常。随便写个你的文字，文字立马就会开始滚动。但很多人不知道，这个标签其实藏着十几个能改变滚动效果的属性参数。比如说，想让文字从右往左飘，或者上下弹跳？这些效果全靠属性设置来搞定。
最基础的三个属性必须得知道。direction控制方向，填left/right/up/down四个值，就像控制遥控车方向键。behavior属性更会玩，设置成scroll是无限循环，alternate会像乒乓球来回弹，slide则跑到终点就停住。scrollamount这个参数控制速度，数值越大跑得越快，超过50的话文字直接起飞成残影。
不过这些只是入门操作。进阶玩家还能用bgcolor给跑马灯加背景色，用width和height限定活动区域。有个特别实用的loop属性，设置循环次数，写-1就是无限循环。还记得当年很多网站用marquee做公告栏吗？就是靠loop控制显示时长。
现在说点硬核的冷知识。hspace和vspace能设置文字与边框的间距，相当于给跑马灯加”呼吸感”。truespeed属性很多人没用过，加上这个参数后scrollamount的数值会严格按照系统时钟计算，避免不同电脑速度不一致。还有onmouseover和onmouseout这两个事件属性，能实现鼠标悬停暂停滚动的交互效果，当年这可是高端操作。
可能你会问：现在都2023年了，谁还用这种老古董标签？确实，W3C早就把marquee踢出标准了，主流浏览器虽然还支持，但指不定哪天就彻底退役。不过很多政府网站、学校系统还在用，毕竟维护老系统时改CSS动画成本太高。有个做银行系统的朋友跟我说，他们内部管理系统现在还有三千多个marquee标签在运行。
那替代方案是什么？当然是CSS3动画。用@keyframes控制运动轨迹，transform做位移变换，不仅能实现所有marquee效果，还能加渐变、阴影这些现代特效。不过说实话，要论实现速度，marquee确实有优势——两行代码搞定的事，用CSS得写十几行。所以现在偶尔在个人博客看到marquee，反而有种复古朋克的趣味感。
小编最近帮人改老网站时，发现个奇葩现象：某个marquee标签设置了direction=”left”却往右跑，查了半天才发现是嵌套了三个marquee互相干扰。所以说啊，这些老代码就像磁带随身听，用着挺怀旧，但真要出问题修起来能让人抓狂。下次要是看到网页上有文字在抽搐式滚动，多半就是marquee属性冲突的锅。
本站文章由SEO技术博客撰稿人原创，作者:阿君创作，如若转载请注明原文及出处：https://www.ainiseo.com/hosting/33931.html
