HTML5+CSS3+JS小实例:科技感满满的鼠标移动推开粒子特效

news/2024/7/24 2:06:53 标签: html5, css3, javascript, 前端, 科技

实例:科技感满满的鼠标移动推开粒子特效

技术栈:HTML+CSS+JS

效果:

源码:

【html】

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>科技感满满的鼠标移动推开粒子特效</title>
    <link rel="stylesheet" href="162.css">
</head>

<body>
    <canvas id="my_canvas"></canvas>
    <div class="text">鼠标移动推开粒子</div>
</body>

</html>

<!-- 引入粒子插件 -->
<script src="particle.min.js"></script>
<script>
    // 初始化

http://www.niftyadmin.cn/n/4995071.html

相关文章

四方定理c++题解

题目描述 四方定理是数论中著名的一个定理&#xff0c;指任意一个自然数都可以拆成四个自然数的平方之和。例如&#xff1a; 251^22^22^24^2 对 25来说&#xff0c;还有其他方案&#xff1a; 250^20^23^24^2 以及 250^20^20^25^2 给定一个自然数 n &#xff0c;请输出 n…

算法通关村14关 | 堆结构

1. 堆的概念与特征 堆是将一组数据按照完全二叉树的存储顺序&#xff0c;将数据存储在一维数组中的结构&#xff0c;对的结构有两种&#xff0c;一种称为大顶堆&#xff0c;一种称为小顶堆。 小顶堆&#xff1a;任意节点的值均小于等于它的左右孩子&#xff0c;并且最小的值位于…

链接库导致Crash问题分析

问题现象&#xff1a; 最近和第三方开发软件功能&#xff0c;他们提供封装库给到我们&#xff0c;我们这边链接他们给的库之后&#xff0c;调用库中函数接口开发&#xff0c;软件编译跑起来之后正常&#xff0c;但是在调用我们这边系统库某个函数的时候会发生crash&#xff0c…

linux定时删除服务器日志

不说废话。直接进入操作流程 linux 定时任务是用的crontab 查看 crontab是否启动 service crond statusdead 死的 启动crontab service crond start 再次查看状态 running 运转的 查看 crontab cat /etc/crontab 查看 crontab任务 crontab -l 编辑 crontab任务 crontab …

PPT分享:EasyDarwin行业赋能 | 一种效率提升10倍的音视频开发方法

EasyAVFilter本质上就是将ffmpeg.exe改造成了动态库, 方便应用程序集成ffmpeg的各项功能&#xff1b; 详细信息可以直接看https://www.easydarwin.org/tools/153.html&#xff0c;具体用法和场景&#xff0c;看视频介绍&#xff1b;

系统架构技能之设计模式-抽象工厂模式

一、上篇回顾 上篇我们主要讲述了简单工厂模式和工厂模式。并且分析了每种模式的应用场景和一些优缺点&#xff0c;我们现在来回顾一下&#xff1a; 简单工厂模式&#xff1a;一个工厂负责所有类型对象的创建&#xff0c;不支持无缝的新增新的类型对象的创建。 工厂模式&…

Python库-coverage测试覆盖率

Coverage.py 是用于测量Python程序代码覆盖率的工具。它 监视程序&#xff0c;注意代码的哪些部分已执行&#xff0c;然后 分析源以识别可以执行但未执行的代码。 覆盖率测量通常用于衡量测试的有效性。它 可以显示测试正在执行代码的哪些部分&#xff0c;以及哪些部分是 不。…

用svg path 绘制梯形

使用 SVG path 绘制梯形也很简单。下面是一个示例代码&#xff1a; <svg width"200" height"100"><path d"M 20 10 L 180 10 L 150 80 L 50 80 Z" /> </svg>在这个示例中&#xff0c;我们使用了一个 <path> 元素来绘制…