用JS+CSS打造你自己的弹幕王国，让网页动起来！

本文链接：https://blog.youkuaiyun.com/weixin_62650212/article/details/129679986

本文介绍了如何使用JavaScript和CSS来创建网页弹幕效果，包括使用DOM方法和CANVAS方法。DOM方法利用HTML元素和CSS动画，而CANVAS方法借助JavaScript绘图API，提供更灵活的控制。文中提供了详细的代码示例，帮助读者理解和实现这两种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
主要内容
总结
更多宝藏

前言

😎🥳😎🤠😮🤖🙈💭🍳🍱
用JS+CSS打造你自己的弹幕王国，让网页动起来！
弹幕大法，让你的网页像视频一样有趣！
如何用JS+CSS实现弹幕效果？看完这篇博客，你就会了！
JS+CSS + 弹幕 = 网页新体验！教你如何用简单的代码实现弹幕功能！
你还不会用JS+CSS做弹幕？快来学习这个超酷的网页技巧吧！

你想用js和css实现弹幕效果吗？弹幕效果是指在视频或图片上显示滚动的文字或图形，通常用于表达观众的评论或反馈。

主要内容

实现方法

有两种主要的方法来实现弹幕效果：DOM和canvas。

DOM方法是使用HTML元素和CSS样式来创建和控制弹幕，这种方法的优点是动画较为流畅，且一些特殊效果（如文字阴影）较容易实现（只要在CSS中设置对应的属性即可）。

canvas方法是使用JavaScript绘图API来在一个画布上绘制和移动弹幕，这种方法的优点是可以更灵活地控制弹幕的大小、颜色、速度等属性，且不会受到HTML元素的限制。

你可以根据自己的需求和喜好选择一种方法来实现弹幕效果。

DOM方法

首先，你需要在HTML中创建一个容器元素，比如div，用来放置弹幕。然后，你需要在CSS中设置容器元素的样式，比如宽度、高度、背景色、溢出隐藏等。接下来，你需要在JavaScript中定义一个函数，用来创建和插入弹幕元素。这个函数需要接收一个参数，表示弹幕的内容。然后，在函数内部，你需要创建一个span元素，并设置其文本内容为参数值。接着，你需要为span元素添加一些样式，比如字体大小、颜色、位置等。最后，你需要将span元素插入到容器元素中，并使用CSS动画或定时器来让它从右向左移动。

显现效果

请添加图片描述

代码

<html>
<head>
<style>
  #container {
    width: 800px;
    height: 600px;
    background-color: black;
    overflow: hidden;
    position: relative;
  }

  .danmu {
    position: absolute;
    right: 0;
    white-space: nowrap;
    font-size: 24px;
    color: white;
  }

  @keyframes move {
    from {right: 0;}
    to {right: calc(100% + 200px);}
  }
</style>
</head>
<body>
<div id="container"></div>
<script>
// 定义一个函数用来创建和插入弹幕
function createDanmu(text) {
  // 创建一个span元素
  var danmu = document.createElement("span");
  // 设置其文本内容为参数值
  danmu.innerText = text;
  // 设置其类名为danmu
  danmu.className = "danmu";

    // 设置其随机的高度
  danmu.style.top = Math.random() * (container.clientHeight - danmu.clientHeight) + "px";
  // 设置其随机的颜色
  danmu.style.color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
  // 将span元素插入到容器元素中
  container.appendChild(danmu);
  // 使用CSS动画来让span元素从右向左移动
  danmu.style.animation = "move " + (5 + Math.random() * 5) + "s linear infinite";
}

// 获取容器元素
var container = document.getElementById("container");
// 定义一个数组用来存放一些弹幕内容
var texts = ["Hello", "World","关注", "弹幕", "点赞", "哈哈哈"];
// 定义一个定时器，每隔一秒创建并插入一条弹幕
setInterval(function() {
  // 随机选择一个弹幕内容
  var text = texts[Math.floor(Math.random() * texts.length)];
  // 调用函数创建并插入弹幕
  createDanmu(text);
},1000);
</script>
</body>
</html>

CANVAS方法

首先，你需要在HTML中创建一个canvas元素，用来绘制弹幕。然后，你需要在CSS中设置canvas元素的样式，比如宽度、高度、背景色等。接下来，你需要在JavaScript中定义一个函数，用来创建和绘制弹幕对象。这个函数需要接收一个参数，表示弹幕的内容。然后，在函数内部，你需要创建一个对象，并设置其属性值为参数值和一些随机的样式值。接着，你需要将对象存入一个数组中，并使用requestAnimationFrame或定时器来循环遍历数组并绘制每个对象到canvas上。

显现效果

在这里插入图片描述

代码

<html>
<head>
<style>
  #canvas {
    width: 800px;
    height: 600px;
    background-color: black;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 定义一个函数用来创建和绘制弹幕
function createDanmu(text) {
  // 创建一个对象
  var danmu = {};
  // 设置其文本内容为参数值
  danmu.text = text;
  // 设置其字体大小为24px
  danmu.fontSize = 24;
  // 设置其随机的颜色
  danmu.color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
  // 设置其初始的x坐标为canvas的宽度
  danmu.x = canvas.width;
  // 设置其随机的y坐标，保证在canvas的高度范围内
  danmu.y = Math.random() * (canvas.height - danmu.fontSize) + danmu.fontSize;
  // 设置其移动速度为2到6之间的随机数
  danmu.speed = Math.random() * (6 - 2) + 2;
  
  // 将对象存入数组中
  danmus.push(danmu);
}

// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取canvas的上下文对象，用来绘制图形
var ctx = canvas.getContext("2d");
// 定义一个数组用来存放弹幕对象
var danmus = [];
// 定义一个数组用来存放一些弹幕内容
var texts = ["Hello", "World","关注", "弹幕", "点赞", "哈哈哈"];
// 定义一个定时器，每隔一秒创建一条弹幕
setInterval(function() {
      // 随机选择一个弹幕内容
  var text = texts[Math.floor(Math.random() * texts.length)];
  // 调用函数创建一条弹幕
  createDanmu(text);
},1000);

// 定义一个函数用来绘制所有的弹幕
function drawDanmus() {
  // 清空canvas上的内容
  ctx.clearRect(0,0,canvas.width,canvas.height);
  // 遍历数组中的每个对象
  for (var i = 0; i < danmus.length; i++) {
    // 获取当前对象
    var danmu = danmus[i];
    // 设置字体样式
    ctx.font = danmu.fontSize + "px Arial";
    // 设置字体颜色
    ctx.fillStyle = danmu.color;
    // 绘制文本到canvas上，根据对象的x和y坐标
    ctx.fillText(danmu.text,danmu.x,danmu.y);
    // 更新对象的x坐标，使其向左移动一定的速度
    danmu.x -= danmu.speed;
    // 判断对象是否已经移出了canvas的左边界，如果是，则从数组中删除该对象，并减少i的值，避免跳过下一个对象
    if (danmu.x < -ctx.measureText(danmu.text).width) {
      danmus.splice(i,1);
      i--;
    }
  }
}

// 使用requestAnimationFrame来循环调用drawDanmus函数，实现动画效果
function animate() {
     // 调用drawDanmus函数
  drawDanmus();
  // 使用requestAnimationFrame来再次调用animate函数，形成循环
  requestAnimationFrame(animate);
}

// 调用animate函数，开始动画
animate();
</script>
</body>
</html>

总结

🐋 🐬 🐶 🐳 🐰 🦀☝️ ⭐ 👉 👀
这就是使用JS+CSS方法实现弹幕效果的简单示例网页。通过这个功能，你可以让你的网页更加有趣和互动，吸引更多的用户和浏览量。如果你对这个功能感兴趣，欢迎在评论区留言，分享你的想法和建议。如果你喜欢我的博客，请记得点赞、收藏和关注我，我会持续更新更多有用的网页技巧和教程。谢谢大家！