怎么用HTML写微信弹幕效果

最新推荐文章于 2023-05-29 08:50:51 发布
最新推荐文章于 2023-05-29 08:50:51 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： HTML 文章标签： html 微信

2016年3月微信公众号过火的莫过于图片弹幕效果，也许有小伙伴好奇这些怎么做的吧。其实一点都不复杂，弹幕就是个HTML代码，换上文字就是你的内容。直接上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>微信弹幕</title>
    </head>
    <body>
<section id="wrap_node" style="border: dashed 1px #797979; padding: 5px;">

    <section label="Copyright © 2016 playhudong All Rights Reserved." style="

border:none;

border-style:none;

margin: 1em auto;

width:100%;

" id="shifu_bar_001" donone="shifuMouseDownStyle(&#39;shifu_bar_001&#39;)">

        <svg class="xhr" xmlns="http://www.w3.org/2000/svg" style="

width:100%;

height:20em;

background:rgb(255,255,255);

box-sizing:border-box">

            <text y="40" x="-92.6304" fill="rgb(235,166,36)" style="

font-size:1em;

box-sizing:border-box">

                 caobs博主好帅啊

                <animate attributename="x" from="800" to="-400" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="90" x="658.107" fill="rgb(223,34,28)" style="

font-size:1.2em;

box-sizing:border-box">

                快打开 &nbsp;www.csdn.net！！！ 你懂的

                <animate attributename="x" from="800" to="-400" begin="1s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="120" x="181.756" fill="rgb(40,216,8)" style="

font-size:1em;

box-sizing:border-box">

                我要上电视，终于上电视了，o(≧v≦)o~~好棒

                <animate attributename="x" from="800" to="-600" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="160" x="-669.191" fill="rgb(33,25,23)" style="

font-size:0.875em;

box-sizing:border-box">

                csdn，这个网站也很不错，里面好多干货

                <animate attributename="x" from="800" to="-800" begin="3s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="210" x="436.292" fill="rgb(70,118,217)" style="

font-size:1em;

box-sizing:border-box">

                听说明天要下雨

                <animate attributename="x" from="800" to="-800" begin="5s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="240" x="93.4349" fill="rgb(255,92,139)" style="

font-size:0.7em;

box-sizing:border-box">

                曹布斯，ECUT的大学狗

                <animate attributename="x" from="800" to="-800" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="280" x="-390.174" fill="rgb(7,140,59)" style="

font-size:1.2em;

box-sizing:border-box">

          欢迎骚扰曹布斯：微信号：Cao-Hongqing

                <animate attributename="x" from="800" to="-800" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

        </svg>

    </section>

</section>

<p class="shifubrush">

    <br/>

</p>



    </body>
</html>
codercao
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5弹幕效果
06-27
主要是用于当前流行的弹幕效果的展示，希望可以可以帮到大家！
html5弹幕demo
02-16
html5弹幕demo
一起来写个弹幕
AmberWu
05-26 801
一个简单的弹幕
简版弹幕实现。HTML+CSS+JAVASCRIPT
weixin_51175605的博客
11-21 397
输入思路： 1、设置video 2、设置输入框 3、获取输入框的内容，增删改查 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
HTML+CSS+JavaScript制作弹幕效果
qq_44715376的博客
05-29 2789
全屏弹幕，盒子弹幕，视频弹幕
微信小程序-手持弹幕
03-26
通过学习并实践“手持弹幕”这个小程序示例，初学者能够深入理解微信小程序的基本开发流程，包括如何创建页面、处理用户交互、调用API以及进行样式设计等，这对于进一步掌握微信小程序开发技能非常有帮助。...
微信小程序 vidao实现视频播放和弹幕的功能
09-01
发送弹幕的逻辑可以写在`bindSendDanmu`事件处理函数中，获取用户输入的弹幕文本并将其添加到`danmuList`，然后调用`videoContext.sendDanmu`方法发送弹幕： ```javascript bindSendDanmu: function() { const ...
炫酷手持滚动弹幕生成小工具微信小程序源码下载多样化模板.zip
09-14
这种小程序通常被用在各种活动、聚会或者个人表达中，用户可以自定义文字内容、颜色、速度等参数，生成个性化的滚动弹幕效果。以下将详细介绍该源码可能涉及的关键知识点： 1. **微信小程序开发**：微信小程序是一...
微信小程序-飞机大战源码.zip
11-23
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用体验。"飞机大战"是一款基于微信小程序开发的休闲游戏，其源码可供开发者参考和学习，以理解小...
微信小程序仿哔站demo源码
05-14
B站是一个知名的视频分享网站，以其丰富的二次元内容和弹幕互动闻名。下面我们将深入探讨这个demo源码中涉及的关键知识点。 1. **微信小程序框架**：微信小程序使用了自有的WXML（WeiXin Markup Language）和WXSS...
HTML5弹幕文字评论代码.zip
05-28
HTML5弹幕文字评论代码基于jQuery.1.10.2.min.js制作，页面右下角弹幕代码，发表新年祝福。
HTML使用canvas实现弹幕功能
09-28
最近在做大作业的时候需要做一个弹幕播放器，今天小编给大家分享基于HTML使用canvas实现弹幕功能，需要的的朋友参考下吧
弹幕效果制作弹幕效果制作
03-30
用JQ制作的弹幕效果. $(function(){ var colors = ["red","pink","blue","purple","green","yellow"] $("#btn").click(function(){ //拿到用户输入的弹幕内容 //发射出去 创建一个节点 把内容放进来 插入到div里面 //高度随机 颜色随机 animate动画 var randomColor = parseInt(Math.random()*colors.length) var randomY = parseInt(Math.random()*400) // console.log(randomColor) 已经从数组里面随机拿到数组的下标 //创建span标签 $("<span></span>").text($("#text").val()) .css("color",colors[randomColor]) .css("top",randomY) .css("left",1600) .animate({left:-500},10000,"linear",function(){ //到达了终点 回调函数 $(this).remove(); }) .appendTo("#boxDom") $("#text").val("") }) //回车发射 $("#text").keyup(function(e){ if(e.keyCode == 13){ $("#btn").click(); } }) })
一个网页弹幕的简单实现(附源码和运行程序)
01-08
网页弹幕，附带源码和运行程序。 一个网页弹幕的简单实现，仅仅是能 work 的程度。 特别是 chrome 插件简直要去死啦！ 安装： 首先你需要 Chrome 开发版，要不然不能运行非商店的插件。如果是 Opera 的话那就www 然后打开 chrome://extensions，把 bin 下的 biubiubiu-extension.crx 文件拖进去 最后点击右上角的图标，开始~
滚动弹幕（JS/HTML/CSS）
m0_74033027的博客
01-13 1500
创建两个数组分别装文字颜色和大小，将上面box里放入input输入的内容，用span标签包裹，利用定时器实现文字从左向右滚动，每隔一段时间向右移动一段距离，如果弹幕滑到可视区域以外就被销毁。1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；2.底部中间有一个发送功能，可以发送新的弹幕；3.底部的发送部分可以向下收起和弹出。
如何实现弹幕功能
iteye_16776的博客
07-20 573
目前绝大多数视频网站上都有弹幕功能，可以实时显示用户的评论吐槽。那么如何实现呢？最近我们的项目刚好也需要有个弹幕功能，在这里记录一下实现思路。弹幕无非就是将实时消息加上一些动态效果显示出来。实时消息的发布与接收我们用的是GoEasy推送，半年前就在使用GoEasy推送了一直狠稳定，所以这次我们仍然选的是GoEasy作为我们实现实时信息的发布与接收。至于动态效果嘛，jQuery里有个函数anima...
html实现弹窗
热门推荐
于利文的博客
06-20 8万+
上午闲来无事，用html及原生js写个弹窗，供参考。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin: 0px; ...
HTML使用Canvas实现弹幕功能
若即的专栏
06-21 2434
HTML使用canvas实现弹幕功能简介 最近在做大作业的时候需要做一个弹幕播放器。借鉴了一下别人的源码自己重新实现了一个，演示如下主要的功能有 发送弹幕 设置弹幕的颜色，速度和类型 显示弹幕 已知缺陷： 不能全屏 canvas没有做自适应 没有自定义播放器控件 没有根据播放时间显示相应的弹幕 弹幕不能实现悬停 已知的缺陷以后会进行改进。网上能找到的弹幕播放器的源码一般只做了滚动的弹幕而没有做静止的
视频弹幕技术 php,HTML5实现视频弹幕功能
weixin_32081079的博客
03-09 747
1.首先展示一下弹幕视频弹幕原图，事实说话2.代码展示1>html代码展示关闭弹幕开启静音2>css代码展示*{padding: 0;margin: 0;}input{outline: none;}.barrage {position: relative;width: 100%;height:250px;}#myvideo{position: absolute;/* width: 10...
用微信小程序 实现弹幕功能
最新发布
07-12
4. 弹幕动画效果：为了实现弹幕的动画效果，你可以使用小程序的动画 API，如 `wx.createAnimation` 创建一个动画实例，并设置动画的持续时间、移动距离等属性。然后，将这个动画应用到弹幕组件上，使其实现滚动效果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值