html 粒子效果文字特效

有两个代码如下：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML粒子文字动画特效</title>
</head><body style="background-color:#000"><div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div><iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe>
</body>
</html>

index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML粒子文字动画特效</title>
</head><body><script type="text/javascript">
BLUR = false;PULSATION = true;
PULSATION_PERIOD = 600;
PARTICLE_RADIUS = 4;/* disable blur before using blink */BLINK = false;GLOBAL_PULSATION = false;QUALITY = 2; /* 0 - 5 *//* set false if you prefer rectangles */
ARC = true;/* trembling + blur = fun */
TREMBLING = 0; /* 0 - infinity */FANCY_FONT = "Arial";BACKGROUND = "#000";BLENDING = true;/* if empty the text will be a random number */
var TEXT;
num = 0;
TEXTArray = ["C", "S", "D", "N"];QUALITY_TO_FONT_SIZE = [10, 12, 40, 50, 100, 350];
QUALITY_TO_SCALE = [20, 6, 4, 2, 0.9, 0.5];
QUALITY_TO_TEXT_POS = [10, 20, 60, 100, 370, 280];window.onload = function () {document.body.style.backgroundColor = BACKGROUND;var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var W = canvas.width;var H = canvas.height;var tcanvas = document.createElement("canvas");var tctx = tcanvas.getContext("2d");tcanvas.width = W;tcanvas.height = H;total_area = W * H;total_particles = 928;single_particle_area = total_area / total_particles;area_length = Math.sqrt(single_particle_area);var particles = [];for (var i = 1; i <= total_particles; i++) {particles.push(new particle(i));}function particle(i) {this.r = Math.round(Math.random() * 255 | 0);this.g = Math.round(Math.random() * 255 | 0);this.b = Math.round(Math.random() * 255 | 0);this.alpha = 1;this.x = (i * area_length) % W;this.y = (i * area_length) / W * area_length;/* randomize delta to make particles sparkling */this.deltaOffset = Math.random() * PULSATION_PERIOD | 0;this.radius = 0.1 + Math.random() * 2;}var positions = [];function new_positions() {TEXT = TEXTArray[num];if (num < TEXTArray.length - 1) {num++;} else {num = 0;}//alert(TEXT);tctx.fillStyle = "white";tctx.fillRect(0, 0, W, H)//tctx.fill();tctx.font = "bold " + QUALITY_TO_FONT_SIZE[QUALITY] + "px " + FANCY_FONT;//tctx.textAlign='center';//文本水平对齐方式//tctx.textBaseline='middle';//tctx.strokeStyle = "black";tctx.fillStyle = "#f00";//tctx.strokeText(TEXT,30, 50);tctx.fillText(TEXT, 20, 60);image_data = tctx.getImageData(0, 0, W, H);pixels = image_data.data;positions = [];for (var i = 0; i < pixels.length; i = i + 2) {if (pixels[i] != 255) {position = {x: (i / 2 % W | 0) * QUALITY_TO_SCALE[QUALITY] | 0,y: (i / 2 / W | 0) * QUALITY_TO_SCALE[QUALITY] | 0}positions.push(position);}}get_destinations();}function draw() {var now = Date.now();ctx.globalCompositeOperation = "source-over";if (BLUR) ctx.globalAlpha = 0.1;else if (!BLUR && !BLINK) ctx.globalAlpha = 1.0;ctx.fillStyle = BACKGROUND;ctx.fillRect(0, 0, W, H)if (BLENDING) ctx.globalCompositeOperation = "lighter";for (var i = 0; i < particles.length; i++) {p = particles[i];/* in lower qualities there is not enough full pixels for all of  them - dirty hack*/if (isNaN(p.x)) continuectx.beginPath();ctx.fillStyle = "rgb(" + p.r + ", " + p.g + ", " + p.b + ")";ctx.fillStyle = "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.alpha + ")";if (BLINK) ctx.globalAlpha = Math.sin(Math.PI * mod * 1.0);if (PULSATION) { /* this would be 0 -> 1 */var mod = ((GLOBAL_PULSATION ? 0 : p.deltaOffset) + now) % PULSATION_PERIOD / PULSATION_PERIOD;/* lets make the value bouncing with sinus */mod = Math.sin(mod * Math.PI);} else var mod = 1;var offset = TREMBLING ? TREMBLING * (-1 + Math.random() * 2) : 0;var radius = PARTICLE_RADIUS * p.radius;if (!ARC) {ctx.fillRect(offset + p.x - mod * radius / 2 | 0, offset + p.y - mod * radius / 2 | 0, radius * mod,radius * mod);} else {ctx.arc(offset + p.x | 0, offset + p.y | 0, radius * mod, Math.PI * 2, false);ctx.fill();}p.x += (p.dx - p.x) / 10;p.y += (p.dy - p.y) / 10;}}function get_destinations() {for (var i = 0; i < particles.length; i++) {pa = particles[i];particles[i].alpha = 1;var distance = [];nearest_position = 0;if (positions.length) {for (var n = 0; n < positions.length; n++) {po = positions[n];distance[n] = Math.sqrt((pa.x - po.x) * (pa.x - po.x) + (pa.y - po.y) * (pa.y - po.y));if (n > 0) {if (distance[n] <= distance[nearest_position]) {nearest_position = n;}}}particles[i].dx = positions[nearest_position].x;particles[i].dy = positions[nearest_position].y;particles[i].distance = distance[nearest_position];var po1 = positions[nearest_position];for (var n = 0; n < positions.length; n++) {var po2 = positions[n];distance = Math.sqrt((po1.x - po2.x) * (po1.x - po2.x) + (po1.y - po2.y) * (po1.y - po2.y));if (distance <= 5) {positions.splice(n, 1);}}} else {//particles[i].alpha = 0;}}}function init() {new_positions();setInterval(draw, 30);setInterval(new_positions, 2000);}init();
};
</script><style type="text/css">
body {background: #000;text-align: center;font-family: "simhei"
}
canvas {margin: auto;position: absolute;left: 0;right:0;top: 0;bottom: 0;
}
</style><canvas id="canvas" width="1000" height="800"></canvas></body>
</html>

下面是运行效果视频：

20240124_21：16：06_1

代码可以直接复制

如果有啥问题可以问我看到一定会回复大家，如果大家喜欢可以作者点赞和关注

大家的支持是我创作下去的最大动力！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/644959.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HTML5和CSS3的新特性

HTML5和CSS3的新特性

HTML5的新特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等 1&#xff0c;HTML5新增的语义化标签 <header> 头部标签 <nav> 导航标签 <article> …
阅读更多...
《WebKit 技术内幕》学习之九（4）： JavaScript引擎

《WebKit 技术内幕》学习之九（4）： JavaScript引擎

4　实践——高效的JavaScript代码 4.1　编程方式 关于如何使用JavaScript语言来编写高效的代码&#xff0c;有很多铺天盖地的经验分享&#xff0c;以及很多特别好的建议&#xff0c;读者可以搜索相关的词条&#xff0c;就能获得一些你可能需要的结果。同时&#xff0c;本节希望…
阅读更多...
记录centos安装nginx过程和问题

记录centos安装nginx过程和问题

今天在centos上安装了nginx&#xff0c;遇到了些问题&#xff0c;记录一下。 使用yum直接安装的话安装的版本是1.20.1&#xff0c;使用源码包安装可以装到1.25.0&#xff08;最新稳定版&#xff09;。很有意思的一点是两种安装方法下安装的路径是不同的&#xff0c;且源码安装…
阅读更多...
第一讲：入门知识笔记

第一讲：入门知识笔记

python 变量无类型&#xff0c;但值里面有类型。 动态类型语言&#xff08;python&javascript&#xff09;Subtraction num 10 print(num / 2, num // 3, num // -3) # 5.0, 3, -4 向下取整 int(num / 3) # 不用向下取整的办法reverse 3-digit number def res(num):digi…
阅读更多...
Java 面向对象案例 03（黑马）

Java 面向对象案例 03（黑马）

代码&#xff1a; public class phoneTest {public static void main(String[] args) {phone [] arr new phone[3];phone p1 new phone("华为",6999,"白色");phone p2 new phone("vivo",4999,"蓝色");phone p3 new phone("苹…
阅读更多...
手把手教你用深度学习做物体检测(一)： 快速感受物体检测的酷炫

手把手教你用深度学习做物体检测(一)： 快速感受物体检测的酷炫

我们先来看看什么是物体检测&#xff0c;见下图&#xff1a; 如上图所示&#xff0c; 物体检测就是需要检测出图像中有哪些目标物体&#xff0c;并且框出其在图像中的位置。 本篇文章&#xff0c;我将会介绍如何利用训练好的物体检测模型来快速实现上图的效果&#xff0c;这里…
阅读更多...
Pyside6中QTableWidget使用

Pyside6中QTableWidget使用

目录 一&#xff1a;介绍&#xff1a; 二&#xff1a;演示 一&#xff1a;介绍&#xff1a; 在 PySide6 中&#xff0c;QTableWidget 是一个用于展示和编辑表格数据的控件。它提供了在窗口中创建和显示表格的功能&#xff0c;并允许用户通过单元格来编辑数据。 要使用 QTabl…
阅读更多...
什么是功能测试？原因、方式和类型

什么是功能测试？原因、方式和类型

功能测试是软件开发和部署之间的检查点。每次点击和每次交互都需要严格的功能测试过程。这不仅仅是为了识别错误&#xff0c;更是为了确保无缝、以用户为中心的体验。完善您的方法并提供功能强大、令人印象深刻且吸引人的软件所需的见解。 什么是功能测试 首先&#xff0c;功能…
阅读更多...
多线程批量同步数据到ES

多线程批量同步数据到ES

需求背景&#xff1a;新增了ES&#xff0c;现在要讲数据库某张表的数据同步到ES中&#xff0c;百万级的数据量一次性读取同步肯定不行&#xff0c;所以可以用多线程同步执行同步数据。 1.线程池配置类 Configuration public class ThreadPoolConfig {/*** 核心线程池大小*/pr…
阅读更多...
240124

240124

阅读更多...
C语言学习（5）—— 数组

C语言学习（5）—— 数组

一、一维数组 1. 基本数据类型的数组 数组的定义&#xff1a;数据类型 数组名 [数组大小]; 数组名就代表该数组的首地址&#xff0c;即a[0]的地址 使用下标来访问数组元素 数组是多个相同类型数据的组合&#xff0c;一个数组一旦定义了&#xff0c;其长度是固定的&…
阅读更多...
开源模型应用落地-业务整合篇（四）

开源模型应用落地-业务整合篇（四）

一、前言 通过学习第三篇文章，我们已经成功地建立了IM与AI服务之间的数据链路。然而，我们目前面临一个紧迫需要解决的安全性问题，即非法用户可能会通过获取WebSocket的连接信息，顺利地连接到我们的服务。这不仅占用了大量的无效连接和资源，还对业务数据带来了潜在的风险。…
阅读更多...
build.gradle标签详解

build.gradle标签详解

一、简介 Gradle是一个开源的构建自动化工具&#xff0c;主要用于Java、Groovy和其他JVM语言的项目。它使用一个基于Groovy或Kotlin的特定领域语言(DSL)来声明项目设置&#xff0c;从而摒弃了基于XML的繁琐配置。build.gradle是Gradle项目的核心配置文件&#xff0c;它定义了项…
阅读更多...
系统架构设计师教程（十五）面向服务架构设计理论与实践

系统架构设计师教程（十五）面向服务架构设计理论与实践

面向服务架构设计理论与实 15.1 SOA的相关概念15.1.1 SOA的定义15.1.2 业务流程与BPEL15.2 SOA的发展历史15.2.1 SOA的发展历史15.2.2 国内SOA的发展现状与国外对比15.2.3 SOA的微服务化发展15.3 SOA的参考架构15.4 SOA主要协议和规范15.4.1 UDDI协议15.4.2 WSDL规范15.4.3 SOA…
阅读更多...
清理Docker环境

清理Docker环境

清理Docker环境&#xff1a;有时&#xff0c;Docker环境可能会出现一些问题&#xff0c;导致网络连接故障。您可以尝试清理Docker环境并重新启动。可以尝试运行以下命令&#xff1a; 复制 docker-compose down docker system prune -a docker-compose up docker-compose up 和…
阅读更多...
Windows 下 TFTP 服务搭建及 U-Boot 中使用 tftp 命令实现文件下载

Windows 下 TFTP 服务搭建及 U-Boot 中使用 tftp 命令实现文件下载

目录 Tftpd32/64文件下载更多内容 TFTP&#xff08;Trivial File Transfer Protocol&#xff0c;简单文件传输协议&#xff09;是 TCP/IP 协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务&#xff0c;端口号为 6…
阅读更多...
Vue.js动画库

Vue.js动画库

1、vue2-animate https://animate.style/ 地址&#xff1a;https://www.npmjs.com/package/vue2-animate一个可以在你的网站中即用型跨浏览器动画库&#xff0c;非常适合主页、滑块和动画引导提示。这是Animate.css 的一个端口&#xff0c;用于 Vue.js 2.0/3.0 和Alpines.js …
阅读更多...
免费SSL申请和自动更新

免费SSL申请和自动更新

当前是在mac下操作 安装certbot # mac下brew安装即可 brew install certbotcentos 安装 centos安装文档 申请泛解析证书 sudo certbot certonly --manual --preferred-challengesdns -d *.yourdomain.com## 输出 Saving debug log to /var/log/letsencrypt/letsencrypt.lo…
阅读更多...
[Android] Android文件系统中存储的内容有哪些？

[Android] Android文件系统中存储的内容有哪些？

文章目录 前言root 文件系统/system 分区稳定性:安全性: /system/bin用来提供服务的二进制可执行文件:调试工具:UNIX 命令&#xff1a;调用 Dalvik 的脚本(upall script):/system/bin中封装的app_process脚本 厂商定制的二进制可执行文件: /system/xbin/system/lib[64]/system/…
阅读更多...
Web前端主题色更换实现方式全解析（二）

Web前端主题色更换实现方式全解析（二）

Web前端主题色更换实现方式全解析&#xff08;一&#xff09; Web前端主题色更换实现方式全解析&#xff08;二&#xff09; 文章目录 一、基于前端框架的主题色切换1. Vue.js实现方式1.1 使用Vue的动态样式绑定1.2 结合Vuex管理主题色状态1.3 示例代码与效果展示 2. 前端框架通…
阅读更多...
最新文章

Copyright @ 2022~2023