利用HTML实现弹幕滚动效果（跑马灯标签）

HTML跑马灯标签

1.跑马灯标签（marquee）
2.代码实现

我们经常会在看电影的时候，打开弹幕，以此来查看网友们对电影的实时评价。面对屏幕上一条一条滚动的弹幕，到底是如何实现的呢？
下面我们来介绍用HTML实现弹幕滚动的方法。

1.跑马灯标签（marquee）

标签名：marquee 跑马灯标签，独占一行
属性：
behavior：设置滚动方式
scroll 一直重复
slide 只播放一次
alternate 来回弹动
direction 滚动的方向
right ：向右滚动
left ：向左滚动
up ：向上滚动
down：向下滚动
scrollamount 滚动的速度，数字表示

2.代码实现

<!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>Document</title>
</head>
<body>
<div><marquee behavior="scroll" direction="left" scrollamount="30"><font color="red" size="15px" >666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="20"><font color="aqua" size="20px">又五杀了</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="25"><font >666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="10px">666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="28"><font color="red">666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="20px">牛蛙牛蛙</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="10"><font size="16px" >666</font> </marquee><marquee behavior="scroll" direction="left" scrollamount="15"><font color="pink" size="20px">厉害</font> </marquee>
</div>
</body>
</html>

效果显示（将上方代码放入文本文档，修改后缀名为HTML即可实现动态效果）

利用HTML实现弹幕滚动效果（跑马灯标签）相关推荐

页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
【HTML实现弹幕滚动效果和文字动态发光特效代码】
HTML实现弹幕滚动效果我们经常会在看电影的时候,打开弹幕,以此来查看网友们对电影的实时评价.面对屏幕上一条一条滚动的弹幕,到底是如何实现的呢? 下面我们来介绍用HTML实现弹幕滚动的方法. 1 ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
利用JavaScript分别实现倒计时、跑马灯和打字机效果
倒计时代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
html网页内容自动滚动实现跑马灯效果
1.效果1 超出div高度,文本自动滚动(像跑马灯一样从下往上滚动) 一个div里面有文字 1.如果文字没超出div高度:文字不用滚动 2.如果文字太多超出了div高度,那些文字就自动滚动 ps:滚动 ...
QT- label实现滚动字幕 (跑马灯)效果 -像素级
QT-label滚动字幕原理代码完整源码 + 部件提升想通过QSS实现更多效果的请搜索QT自带帮助文档 Qt Style Sheets Examples,使用样式表来定制程序界面原理让la ...
vue实现分组轮播（一排放4个小的、无缝滚动、跑马灯效果）
前段时间写了个无缝滚动轮播图,有小伙伴评论说,想要一行放几个小的应该怎么实现,现在他来了,在原有无缝滚动轮播图的基础上,小小改动便能实现需求,纯vue不依赖任何第三方插件,复制粘贴即刻使用,话不多说, ...
手机屏大字滚动_LED跑马灯屏-LED跑马灯屏App下载-
LED跑马灯屏软件是一款模拟LED显示屏应用软件,LED跑马灯软件可轻易实现发光LED跑马灯,使用这款LED跑马灯软件可以随你喜欢自行定义滚动的文字和文字样式. LED跑马灯软件是演唱会电子灯牌.机场 ...
iOS - 支持水平 / 垂直显示自动滚动的跑马灯控件 --- SKAutoScrollLabel 的使用和实现
原文链接:http://www.jianshu.com/p/7221bc08f26a SKAutoScrollLabel 是一个同时支持水平 / 垂直两种类型的 "跑马灯" 效果的 ...

利用HTML实现弹幕滚动效果（跑马灯标签）

HTML跑马灯标签

1.跑马灯标签（marquee）

2.代码实现

利用HTML实现弹幕滚动效果（跑马灯标签）相关推荐

最新文章

热门文章