fastadmin后台login登录页面增加canvas粒子动画背景

在FastAdmin后台登录页面增加canvas粒子背景，可以通过以下步骤实现：

在登录页面对应的HTML模板文件中，引入canvas-particle-background.js脚本。
编写canvas-particle-background.js脚本来创建粒子背景动画。
修改样式文件（如果需要）以确保canvas全屏覆盖。

以下是实现这个功能的示例代码：

HTML (login.html):




<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
    ...
    <!-- 登录表单 -->
    <div id="login-main">
        ...
    </div>
    <!-- 引入粒子背景脚本 -->
    <script src="/assets/js/canvas-particle-background.js"></script>
</body>
</html>

JavaScript (canvas-particle-background.js):




document.addEventListener('DOMContentLoaded', function () {
    var canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style = 'position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;';
    document.body.appendChild(canvas);
    var context = canvas.getContext('2d');
 
    var particles = [];
    var particleCount = 500;
 
    function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.velocity = {
            x: (Math.random() - 0.5) * 5,
            y: (Math.random() - 0.5) * 5
        };
        this.radius = Math.random() * 1.5;
        this.color = '#FFFFFF';
    }
 
    Particle.prototype.update = function () {
        this.x += this.velocity.x;
        this.y += this.velocity.y;
 
        if (this.x > canvas.width || this.x < 0) {
            this.velocity.x = -this.velocity.x;
        }
        if (this.y > canvas.height || this.y < 0) {
            this.velocity.y = -this.velocity.y;
        }
    };
 
    Particle.prototype.draw = function () {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        context.fillStyle = this.color;
        context.fill();
    };
 
    function init() {
        for (var i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }
    }
 
    function animate() {
        requestAnimationFrame(animate);
        context.clearRect(0, 0, canvas.width, canvas.height);
 
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
        }
    }
 
    init();
    animate();
});

CSS (style.css):




body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 确保canv

fastadmin后台login登录页面增加canvas粒子动画背景

评论已关闭

推荐阅读