渐变蝴蝶的实现

已于 2025-03-19 01:48:06 修改
阅读量1k 收藏 11
点赞数 25
文章标签： javascript css html
于 2025-03-19 01:42:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_67010376/article/details/146356998
版权

本文将介绍如何使用 HTML、CSS 和 JavaScript 实现一个渐变蝴蝶效果。该效果包括以下核心功能：

 

1. 蝴蝶形状的粒子效果：通过极坐标方程生成蝴蝶形状的粒子。

2. 渐变色：中心区域和粒子使用相同的渐变色，颜色动态变化。

3. 重力效果：粒子在扩散的同时受到重力影响，产生下坠效果。

4. 中心填充：中心区域填充为渐变色，与粒子颜色一样。

 

 

 1. HTML 结构

HTML 部分非常简单，只需要一个 `<canvas>` 元素用于绘制动画。

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>Butterfly Particles</TITLE>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background:#000000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
	<canvas id="pinkboard"></canvas>
</BODY>
</HTML>

2. JavaScript 实现

2.1 设置参数

定义粒子和动画的参数，包括粒子数量、速度、大小、重力加速度等。

var settings = {
particles: {
length: 500, // 粒子数量
duration: 2, // 粒子生命周期
velocity: 100, // 粒子速度
effect: -0.75, // 粒子效果
size: 30, // 粒子大小
},
gravity: 50, // 重力加速度
centerRadius: 50 // 中心圆半径
};

 

2.2 颜色渐变设置

定义渐变色参数，包括渐变时间和颜色变化范围。

var gradientDuration = 5; // 渐变时间
var startHue = Math.random() * 360; // 初始色相
var targetHue = Math.random() * 360; // 目标色相
var gradientStartTime = 0; // 渐变开始时间

 

2.3 蝴蝶形状的极坐标方程

使用极坐标方程 生成蝴蝶形状的坐标。

function pointOnButterfly(t) {
var r = Math.exp(Math.cos(9 * t)) - 2 * Math.cos(4 * t);
return new Point(
r * Math.cos(t) * 50, // 放大倍数
r * Math.sin(t) * 50  // 放大倍数
);
}

 

 2.4 粒子类

定义粒子类，包括粒子的位置、速度、加速度和生命周期。

 

var Particle = (function() {
function Particle() {
this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;
}
Particle.prototype.initialize = function(x, y, dx, dy) {
this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect + settings.gravity; // 添加重力效果
this.age = 0;
};
Particle.prototype.update = function(deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;
};
Particle.prototype.draw = function(context, gradient) {
function ease(t) {
return (--t) * t * t + 1;
}

var size = settings.particles.size * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.beginPath();
context.arc(this.position.x, this.position.y, size / 2, 0, Math.PI * 2);
context.fillStyle = gradient;
context.fill();
};
return Particle;
})();

 

 2.5主动画逻辑

初始化画布，生成粒子并渲染动画。

(function(canvas) {
var context = canvas.getContext('2d'),
particles = new ParticlePool(settings.particles.length),
particleRate = settings.particles.length / settings.particles.duration, // particles/sec
time,
hue = 0; // 颜色变化控制

// 创建渐变色
function createGradient(x, y, size) {
var gradient = context.createRadialGradient(x, y, 0, x, y, size);
gradient.addColorStop(0, `hsl(${hue}, 100%, 70%)`);
gradient.addColorStop(0.5, `hsl(${(hue + 60) % 360}, 100%, 60%)`);
gradient.addColorStop(1, `hsl(${(hue + 120) % 360}, 100%, 50%)`);
return gradient;
}

// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
hue = (hue + 1) % 360; // 让颜色不断变化

// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);

// 创建渐变色
var gradient = createGradient(canvas.width / 2, canvas.height / 2, 100);

// 绘制中心圆
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, settings.centerRadius, 0, Math.PI * 2);
context.fillStyle = gradient;
context.fill();

// create new particles
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnButterfly(Math.PI - 2 * Math.PI * Math.random());
var dir = pos.clone().length(settings.particles.velocity);
particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
}
// update and draw particles
particles.update(deltaTime);
particles.draw(context, gradient);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function() {
onResize();
render();
}, 10);
})(document.getElementById('pinkboard'));

完整代码

 

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>Butterfly Particles</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background:#000000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
	<canvas id="pinkboard"></canvas>
<script>
/*
* Settings
*/
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
gravity: 50, // 重力加速度，单位为像素/秒²
centerRadius: 50 // 中心圆半径
};

/*
* Gradient settings
*/
var gradientDuration = 5; // 渐变时间，单位为秒
var startHue = Math.random() * 360; // 初始随机基色
var targetHue = Math.random() * 360; // 目标随机基色
var gradientStartTime = 0; // 渐变开始时间

/*
* RequestAnimationFrame polyfill by Erik Möller
*/

(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

/*

* Point class

*/
var Point = (function() {
function Point(x, y) {
this.x = (typeof x !== 'undefined') ? x : 0;
this.y = (typeof y !== 'undefined') ? y : 0;
}
Point.prototype.clone = function() {
return new Point(this.x, this.y);
};
Point.prototype.length = function(length) {
if (typeof length == 'undefined')
return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;
};
Point.prototype.normalize = function() {
var length = this.length();
this.x /= length;
this.y /= length;
return this;
};
return Point;
})();
/*
* Particle class
*/
var Particle = (function() {
function Particle() {
this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;
}
Particle.prototype.initialize = function(x, y, dx, dy) {
this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect + settings.gravity; // 添加重力效果
this.age = 0;
};
Particle.prototype.update = function(deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;
};
Particle.prototype.draw = function(context, gradient) {
function ease(t) {
return (--t) * t * t + 1;
}

var size = settings.particles.size * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.beginPath();
context.arc(this.position.x, this.position.y, size / 2, 0, Math.PI * 2);
context.fillStyle = gradient;
context.fill();
};
return Particle;
})();
/*

* ParticlePool class

*/

var ParticlePool = (function() {
var particles,
firstActive = 0,
firstFree = 0,
duration = settings.particles.duration;
function ParticlePool(length) {
// create and populate particle pool
particles = new Array(length);
for (var i = 0; i < particles.length; i++)
particles[i] = new Particle();
}
ParticlePool.prototype.add = function(x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
// handle circular queue
firstFree++;
if (firstFree == particles.length) firstFree = 0;
if (firstActive == firstFree ) firstActive++;
if (firstActive == particles.length) firstActive = 0;
};

ParticlePool.prototype.update = function(deltaTime) {
var i;
// update active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}

if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++)
particles[i].update(deltaTime);
}

// remove inactive particles

while (particles[firstActive].age >= duration && firstActive != firstFree) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function(context, gradient) {
// draw active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, gradient);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].draw(context, gradient);
for (i = 0; i < firstFree; i++)
particles[i].draw(context, gradient);
}
};
return ParticlePool;
})();
/*

* Putting it all together

*/

(function(canvas) {
var context = canvas.getContext('2d'),
particles = new ParticlePool(settings.particles.length),
particleRate = settings.particles.length / settings.particles.duration, // particles/sec
time,
hue = 0; // 颜色变化控制

// 蝴蝶形状的极坐标方程
function pointOnButterfly(t) {
var r = Math.exp(Math.cos(9 * t)) - 2 * Math.cos(4 * t);
return new Point(
r * Math.cos(t) * 50, // 放大倍数
r * Math.sin(t) * 50  // 放大倍数
);
}

// 创建渐变色
function createGradient(x, y, size) {
var gradient = context.createRadialGradient(x, y, 0, x, y, size);
gradient.addColorStop(0, `hsl(${hue}, 100%, 70%)`);
gradient.addColorStop(0.5, `hsl(${(hue + 60) % 360}, 100%, 60%)`);
gradient.addColorStop(1, `hsl(${(hue + 120) % 360}, 100%, 50%)`);
return gradient;
}

// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
hue = (hue + 1) % 360; // 让颜色不断变化

// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);

// 创建渐变色
var gradient = createGradient(canvas.width / 2, canvas.height / 2, 100);

// 绘制中心圆
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, settings.centerRadius, 0, Math.PI * 2);
context.fillStyle = gradient;
context.fill();

// create new particles
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnButterfly(Math.PI - 2 * Math.PI * Math.random());
var dir = pos.clone().length(settings.particles.velocity);
particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
}
// update and draw particles
particles.update(deltaTime);
particles.draw(context, gradient);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function() {
onResize();
render();
}, 10);
})(document.getElementById('pinkboard'));
</script>

</BODY>
</HTML>

运行效果

点击查看效果

 

总结

通过极坐标方程生成蝴蝶形状，结合渐变色和重力效果，实现了动态的渐变蝴蝶动画。数学知识（如极坐标方程、向量运算、运动学公式）是代码的核心，展现了数学在编程和设计中的重要性。

 

【HTML CSS JS 蝴蝶飞舞特效 绝美（附完整代码）】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-30 3388
效果 这不是视频哦！是代码实现的效果。大家喜欢的可以自己再探索探索！可以更加有意思，实现不一样的效果。 代码 下面是完整的代码，大家可以自行去运行实验哦！ 注意：运行时有可能会稍等几秒才会出效果哦！ index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>蝴蝶飞舞</title> <link rel="styl
【用JavaScript代码写“蝴蝶飞舞“】
2301_76488535的博客
05-04 517
连贯的动态图片都可以用这个方法。
HTML里css画蝴蝶,纯CSS画的小蝴蝶 – 小蝴蝶
weixin_32515143的博客
06-20 240
/*** css3 butterfly animation* coder: xiaohudie* 2013-05-19*/.a {position:absolute;top: 10px;left: -80px;width:250px;-webkit-transform:rotate( 15deg);-moz-transform:rotate(15deg);rotation:25deg; }.b,....
HTML里css画蝴蝶,纯css3制作煽动翅膀的蝴蝶的示例
weixin_29608135的博客
06-20 650
纯css3制作煽动翅膀的蝴蝶，先看效果怎么样，效果还不错吧上代码：htmlcssbody{ background: url("./images/bg.jpg") no-repeat; } #butterfly{ width: 600px; height: 500px; positio...
HTML里css画蝴蝶,纯css制作煽动翅膀的蝴蝶(原创)
weixin_36184718的博客
06-20 593
body {background:url("//www.jq22.com/gxwj/bg.jpg") no-repeat;}#butterfly {width:600px;height:500px;position:relative;transform:scale(0.35);transform-style:preserve-3d;}.leftSide {width:267px;height:42...
MATLAB蝴蝶飞行模拟深度解析
weixin_42389113的博客
11-29 1191
本文还有配套的精品资源，点击获取 简介：MATLAB作为多领域的科研软件，在本次项目中被用于构建蝴蝶飞行模拟模型，深入探讨MATLAB编程技巧和模拟原理。通过多个以"Butterfly_"开头的文件，模拟展示了蝴蝶飞行路径的动态可视化和用户交互功能。项目不仅体现了MATLAB在数值计算和图形处理上的优势，而且结合了多学科知识，为学习者提供了一个理解MATLAB编程和动态模拟...
渐变虚框及边框滚动动画的纯CSS实现
gabby____的博客
09-05 9085
一、渐变虚线边框的实现 前段时间，有位小伙伴在微博上问了我这么一个虚线边框如何实现渐变效果的问题： 如果对边框的样式细节不是很在意，则可以借助反向镂空的方法实现，也就是虚线原本实色的地方和周围颜色融为一体，看上去透明，而原来虚框透明的部分透出渐变背景色，于是看上去像是渐变色。 如下HTML和CSS： &lt;div class="box"&gt; &lt;div class=...
Photoshop蝴蝶飞舞特效设计教程
weixin_32242475的博客
10-02 1366
本文还有配套的精品资源，点击获取 简介：Photoshop是图像处理领域的利器，可用来制作具有创意的动态特效。本教程将引导你通过一系列步骤，创建一个充满活力的蝴蝶飞舞动画效果，使其适用于海报、网站背景或视频剪辑。从准备素材、掌握基本操作开始，到创建新画布、导入蝴蝶图片、使用选择工具和蒙版，再到制作动画、设置动画参数、应用滤镜效果，最终导出动画，每一步都详细解释了如何操作。本...
PS UI设计实现使用椭圆工具的蝴蝶的效果
weixin_59042297的博客
02-11 167
1.本次效果采用借鉴PS书籍案例制作，之前发的特别潦草，就是把做完的界面发了出来，现在时隔半年在给它完善以下，下面我把操作的步骤发一下；2.我是用的是Photoshop2022软件制作的；3.因为这是我当时学期的一个作业，到目前我有些功能已经忘了，所以讲解可能不详细、不全面，请见谅!4.已经在我的上传资源里同步，可以直接下载psd文件；
使用Flet自主创新创意编程创建的缓动渐变蝴蝶8字舞路径自定义动画模板源代码IDE运行和调试通过
10-20
一、 特色说明 - **动态路径**：蝴蝶沿着8字形路径移动，展示了...这段代码使用 Flet 库创建了一个简单的图形用户界面（GUI），在其中实现了一个蝴蝶图像沿着8字形路径移动的动画效果，同时伴随不透明度的渐变变化。
CSS3实现逼真的蝴蝶飞舞动画特效源码.zip
10-31
每个蝴蝶元素可以通过CSS来定制其形状、颜色和大小，例如使用伪元素和径向渐变来模拟蝴蝶翅膀的纹理： ```html <div class="butterfly"> <!-- 更多蝴蝶元素... --> ``` ```css .butterfly::before, .butterfly...
HTML5制作逼真蝴蝶天空飞舞动画特效
10-24
CSS3的变换（transform）和过渡（transition）属性可能被用来实现蝴蝶飞行时的翻转和渐变效果，而动画（animation）属性则可能用于设定蝴蝶飞行路径和速度的复杂行为。 为了实现3D效果，开发者可能利用了CSS3的透视...
蝴蝶主题日志网页模板：设计灵感与HTML实现
2. **CSS3**：通过CSS3的样式控制，可以实现蝴蝶图案的动画效果、渐变色背景等视觉效果，增强网页的动态感和视觉吸引力。 3. **JavaScript**：JavaScript技术可以用来增强网站的交互性，比如实现蝴蝶动画、响应式...
Preview 插件
augenstern416的博客
05-14 516
3. **智能代码折叠**：自动折叠import等非核心代码，提升可读性"1. **双向绑定调试**：修改props实时反馈，同时生成对应代码示例。1. **代码净化**：移除危险API调用（如fetch、eval）2. **安全沙箱**：通过iframe隔离执行环境，防止恶意代码。2. **沙箱隔离**：iframe + sandbox属性限制。2. **新人 onboarding**：交互式学习组件API。/* 重置继承样式 */3. **API 设计反馈**：通过使用数据优化组件设计。
如何选择合适的企业级商城系统前端状态管理方案？
万米商云的博客
05-14 547
在复杂的电商场景中，前端状态管理是保障系统高性能、可维护性和数据一致性的核心环节。面对商品数据实时更新、多模块状态共享、高并发请求等挑战，如何选择合适的状态管理方案？
Redis实现分布式锁的原始方式详解：从入门到实践
最新发布
一勺菠萝丶的博客
05-18 368
通过Redis实现分布式锁需要严格遵循四个基本原则。虽然本文展示了基础实现方案，但在实际生产环境中，建议使用经过验证的框架（如Redisson），它们已经处理了续约、重试、集群容错等复杂问题。记住：分布式系统的可靠性永远不能完全依赖单一中间件，必须结合业务场景设计兜底方案。
关于 js：9. Node.js 后端相关
Triste__chengxi的博客
05-14 1615
名称作用Node.js用于本地运行 JS 脚本（突破浏览器限制）nvm管理多个 Node 版本（防止依赖冲突）npm/npx安装运行依赖工具库node 脚本可执行 JS 文件，用于爬虫/hook/加密调试事件循环保证异步逻辑（如文件/网络）不阻塞主线程模块功能读取文件内容写入（覆盖）内容追加写入读取目录下的所有文件获取文件大小、类型等信息判断文件/文件夹是否存在方法功能创建 HTTP 服务器发送 HTTP 请求（底层控制）设置返回状态码与 header。
nodejs特性解读
weixin_43026646的博客
05-17 90
事件驱动架构是一种软件设计模式，它通过事件来触发和协调系统中的各个组件。与传统的单线程架构不同，事件驱动架构允许多个事件同时被处理，提高了系统的响应性和并发性。在单线程架构中，所有任务按顺序执行，容易导致性能瓶颈。而事件驱动架构通过事件循环机制，能够高效地处理多个事件，适用于需要高并发和实时响应的应用场景。这种架构在Web服务器、实时通信系统等领域得到广泛应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值