php自动获取favicon源代码（支持ico,png,svg等格式）教程
45天前 > 功能介绍 该工具是一款零依赖、极致性能的 PHP 版网站 favicon（网站图标...
提交表单随机背景颜色并且播放烟花特效
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提交触发烟花+背景变色</title>
<style>
body {
transition: background-color 0.5s ease; /* 背景色过渡动画 */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
font-family: sans-serif;
}
.form-container {
background: white;
padding: 2rem 3rem;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
input {
padding: 0.8rem;
margin: 0.5rem 0;
width: 250px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 0.8rem 2rem;
background: #2c3e50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 1rem;
}
button:hover {
background: #34495e;
}
/* 烟花容器需全屏覆盖且不影响其他元素 */
#fireworks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 允许点击穿透 */
z-index: 9999;
}
</style>
</head>
<body>
<div class="form-container">
<h2>提交表单触发效果</h2>
<form id="myForm">
<div>
<label>姓名：</label><br>
<input type="text" required placeholder="请输入姓名">
</div>
<div>
<label>邮箱：</label><br>
<input type="email" required placeholder="请输入邮箱">
</div>
<button type="submit">提交表单</button>
</form>
</div>
<!-- 烟花Canvas容器 -->
<canvas id="fireworks"></canvas>
<script>
// 1. 表单提交逻辑 + 背景色切换
const form = document.getElementById('myForm');
const body = document.body;
const bgColors = ['#f8f9fa', '#e3f2fd', '#e8f5e9', '#fff3e0', '#fce4ec']; // 切换色库
let currentColorIndex = 0;
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交（实际项目可替换为接口请求）
// 切换背景色
currentColorIndex = (currentColorIndex + 1) % bgColors.length;
body.style.backgroundColor = bgColors[currentColorIndex];
// 发射烟花
createFireworks();
// 提交成功提示（可选）
alert('提交成功！已触发烟花和背景变色～');
});
// 2. 烟花效果核心逻辑
function createFireworks() {
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
// 设置Canvas尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 随机烟花发射位置（以鼠标点击位置为中心，此处用表单位置优化）
const formRect = form.getBoundingClientRect();
const x = formRect.left + formRect.width / 2; // 表单水平中心
const y = formRect.top - 50; // 表单上方50px处发射
// 烟花粒子配置
const particles = [];
const particleCount = 80; // 粒子数量
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // 烟花颜色库
// 创建粒子
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2; // 随机角度
const speed = 2 + Math.random() * 5; // 随机速度
particles.push({
x,
y,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
color: colors[Math.floor(Math.random() * colors.length)],
alpha: 1,
decay: 0.01 + Math.random() * 0.02 // 透明度衰减速度
});
}
// 绘制并更新粒子
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
let alive = false;
particles.forEach(particle => {
if (particle.alpha > 0) {
alive = true;
// 更新位置（添加重力效果）
particle.vy += 0.1;
particle.x += particle.vx;
particle.y += particle.vy;
// 衰减透明度
particle.alpha -= particle.decay;
// 绘制粒子
ctx.beginPath();
ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2);
ctx.fillStyle = `${particle.color}${Math.floor(particle.alpha * 255).toString(16).padStart(2, '0')}`;
ctx.fill();
}
});
// 粒子未消失前持续绘制
if (alive) requestAnimationFrame(draw);
}
draw();
}
// 窗口大小变化时更新Canvas尺寸
window.addEventListener('resize', () => {
const canvas = document.getElementById('fireworks');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
#免责声明#
45天前 > 功能介绍 该工具是一款零依赖、极致性能的 PHP 版网站 favicon（网站图标...
1个月前 ```html 手机端侧边栏（无遮挡） * {margin: 0; padding: 0; box-sizing: bord...
2个月前 Typecho 的缓存机制主要通过 Typecho_Cache 类实现，它不仅支持文件缓存，�...
3个月前 好的，没问题！我已经帮你把整个插件系统整合好了，这是一个可以直接运...
3个月前 通过AI把xiunobbs中的数据库操作方式封装成一个类，方面其他框架程序引用使...
2个月前 提交表单随机背景颜色并且播放烟花特效 ```html 提交触发...