HTML结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">签到墙动画</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="wall" id="wall">
            <!-签到卡片将动态插入这里 -->
        </div>
        <div class="sign-in-form">
            <h2>活动签到</h2>
            <input type="text" id="nameInput" placeholder="请输入姓名" maxlength="10">
            <button id="signInBtn">签到</button>
        </div>
    </div>
    <canvas id="particles"></canvas>
    <script src="script.js"></script>
</body>
</html>

CSS样式 (style.css)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    overflow-x: hidden;
}
.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.wall {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
    min-height: 400px;
}
.sign-in-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: cardAppear 0.6s ease-out;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}
.sign-in-card:hover {
    transform: translateY(-5px);
}
.sign-in-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);
    border-radius: 12px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}
.sign-in-card:hover::before {
    opacity: 1;
}
.card-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}
@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
.sign-in-form {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}
h2 {
    color: #333;
    margin-bottom: 20px;
}
input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}
input:focus {
    border-color: #667eea;
    outline: none;
}
button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s;
}
button:hover {
    transform: scale(1.05);
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
@media (max-width: 768px) {
    .wall {
        justify-content: center;
    }
    .sign-in-form {
        margin: 20px;
    }
}

JavaScript逻辑 (script.js)

// 粒子背景动画
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const particleCount = 50;
class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 3 + 1;
        this.speedX = Math.random() * 3 1.5;
        this.speedY = Math.random() * 3 1.5;
        this.opacity = Math.random() * 0.5 + 0.2;
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x > canvas.width) this.x = 0;
        else if (this.x < 0) this.x = canvas.width;
        if (this.y > canvas.height) this.y = 0;
        else if (this.y < 0) this.y = canvas.height;
    }
    draw() {
        ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}
function initParticles() {
    for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
    }
}
function animateParticles() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
        // 连接临近粒子
        for (let j = i; j < particles.length; j++) {
            const dx = particles[i].x particles[j].x;
            const dy = particles[i].y particles[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < 100) {
                ctx.beginPath();
                ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * (1 distance/100)})`;
                ctx.lineWidth = 1;
                ctx.moveTo(particles[i].x, particles[i].y);
                ctx.lineTo(particles[j].x, particles[j].y);
                ctx.stroke();
            }
        }
    }
    requestAnimationFrame(animateParticles);
}
// 签到功能
const wall = document.getElementById('wall');
const nameInput = document.getElementById('nameInput');
const signInBtn = document.getElementById('signInBtn');
function createSignInCard(name) {
    const card = document.createElement('div');
    card.className = 'sign-in-card';
    card.innerHTML = `<div class="card-name">${name}</div>`;
    // 随机位置动画
    const randomX = Math.random() * (wall.offsetWidth 150);
    const randomY = Math.random() * (wall.offsetHeight 100);
    card.style.position = 'absolute';
    card.style.left = randomX + 'px';
    card.style.top = randomY + 'px';
    wall.appendChild(card);
    // 3秒后移除卡片
    setTimeout(() => {
        card.style.opacity = '0';
        card.style.transform = 'scale(0.8)';
        setTimeout(() => card.remove(), 500);
    }, 3000);
}
signInBtn.addEventListener('click', () => {
    const name = nameInput.value.trim();
    if (name) {
        createSignInCard(name);
        nameInput.value = '';
        // 按钮动画反馈
        signInBtn.style.transform = 'scale(0.95)';
        setTimeout(() => {
            signInBtn.style.transform = 'scale(1)';
        }, 200);
    }
});
nameInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        signInBtn.click();
    }
});
// 窗口大小调整
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});
// 初始化
initParticles();
animateParticles();
// 添加欢迎卡片
createSignInCard('欢迎来到签到墙！');

功能特点：

  1. 粒子背景动画：动态粒子效果，粒子间自动连线
  2. 签到交互：
    • 输入姓名后点击签到
    • 卡片随机位置出现
    • 卡片3秒后自动消失
    • 支持回车键快速签到
  3. 视觉效果：
    • 卡片出现旋转动画
    • 悬停时卡片上浮
    • 渐变背景和按钮
    • 响应式设计适配移动端
  4. 性能优化：
    • 使用requestAnimationFrame优化动画
    • 卡片自动清理避免内存泄漏

使用说明：

  1. 将三个文件保存到同一目录
  2. 用浏览器打开index.html
  3. 在输入框输入姓名并点击签到
  4. 观察签到卡片在墙上的动画效果

免费使用声明：此代码基于MIT许可证开源，可自由用于个人和商业项目，无需授权，如需修改或扩展功能,请保留原作者署名。

如需更复杂的功能（如头像上传、数据持久化、3D效果等），可在此基础上扩展，完整的GitHub项目示例可搜索 "sign-in-wall-animation" 获取更多开源实现。

签到墙动画源码免费下载

签到墙动画源码免费下载

签到墙动画源码免费下载

相关内容

回顶部