当前位置：首页 > news >正文

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

news 2025/7/7 17:51:16

文章目录

前言
主要内容
- 实现方法
- DOM方法
- - 显现效果
  - 代码
- CANVAS方法
- - 显现效果
  - 代码
总结
更多宝藏

前言

😎🥳😎🤠😮🤖🙈💭🍳🍱
用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;// 设置其类名为danmudanmu.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;// 设置其字体大小为24pxdanmu.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方法实现弹幕效果的简单示例网页。通过这个功能，你可以让你的网页更加有趣和互动，吸引更多的用户和浏览量。如果你对这个功能感兴趣，欢迎在评论区留言，分享你的想法和建议。如果你喜欢我的博客，请记得点赞、收藏和关注我，我会持续更新更多有用的网页技巧和教程。谢谢大家！

更多宝藏

🍇🍉🍊🍏🍋🍅🥝🥥🫒🫕🥗
项目仓库看这里🤗：
https://github.com/w-x-x-w
https://gitee.com/w-_-x
博客文章看这里🤭：
https://blog.csdn.net/weixin_62650212
视频推送看这里🤤：
https://space.bilibili.com/1909782963

文章目录

前言

主要内容

实现方法

DOM方法

显现效果

代码

CANVAS方法

显现效果

代码

总结

更多宝藏

相关文章：