利用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实现弹幕滚动效果(跑马灯标签)_第1张图片

你可能感兴趣的:(HTTP,html)