html炫酷特效代码漩涡粒子

在网页设计中，炫酷的特效常常能让页面更生动有趣。今天我们来分享一个让页面更加动感的 HTML 特效 - 漩涡粒子。

!-- 引入 CSS 文件 -->
    link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hongqingcui/css-code-snippet/animate.css" />
    !-- 定义画布 -->
    canvas id="canvas" style="background-color: #242424;
    ">
    /canvas>
    !-- 引入 JS 文件 -->
    script src="https://cdn.jsdelivr.net/gh/hongqingcui/js-code-snippet/canvas-nest.min.js">
    /script>
    script>
// 初始化 canvasNestcanvasNest({
color: '255,255,255', // 粒子颜色count: 200, // 粒子数量opacity: 0.5, // 粒子透明度zIndex: -1 // z-index值}
    );
    // 获取画布元素var canvas = document.getElementById("canvas");
    // 设定高度度与宽度canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 设定 Canvas 上下文var c = canvas.getContext("2d");
// 定义一个粒子对象function Particle(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
// 更新粒子状态this.update = function () {
    this.draw();
    this.r += 0.05;
    this.x += Math.sin(this.r);
    this.y += Math.cos(this.r) * 2;
}
// 绘制粒子this.draw = function () {
    c.beginPath();
    c.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
    c.fillStyle = "#fff";
    c.fill();
    c.closePath();
}
}
    // 存储粒子数组var particles = [];
// 初始化粒子function init() {
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 0;
    for (var i = 0;
     i  100;
 i++) {
    particles.push(new Particle(x, y, radius));
    radius += 5;
}
}
    init();
// 动画循环function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = 'rgba(36,36,36,0.4)';
    c.fillRect(0, 0, canvas.width, canvas.height);
    for (var i = 0;
     i  particles.length;
 i++) {
    particles[i].update();
}
}
    animate();
    /script>
    

以上代码中，我们引入了 animate.css 和 canvas-nest.min.js 两个文件。前者是用于使 Canvas 动画更加生动的库，后者是用于实现粒子动画的库。我们首先初始化了 canvasNest，然后定义了 Particle 对象和粒子数组，接着初始化粒子并绘制，最后循环更新，使每一帧都有一个漩涡粒子动画。通过调整 count、opacity 和 color 等参数，可以产生更加绚丽的效果。试试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！