316 lines
12 KiB
HTML
316 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TermiNexus 头像生成器</title>
|
|
<style>
|
|
/* 基础重置 */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #0a0a1a;
|
|
font-family: 'Orbitron', 'Arial', sans-serif;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* 导入Orbitron字体 - 未来感字体 */
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
|
|
|
|
/* 背景网格效果 */
|
|
body::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(rgba(10, 235, 255, 0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(10, 235, 255, 0.1) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 主容器 */
|
|
.avatar-container {
|
|
width: 300px;
|
|
height: 300px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 20px rgba(138, 43, 226, 0.7),
|
|
0 0 40px rgba(75, 0, 130, 0.5),
|
|
inset 0 0 15px rgba(0, 255, 255, 0.3);
|
|
background: linear-gradient(135deg, #1a0033 0%, #0a0a1a 100%);
|
|
overflow: hidden;
|
|
animation: pulse 4s infinite alternate;
|
|
}
|
|
|
|
/* 脉冲动画 */
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow:
|
|
0 0 20px rgba(138, 43, 226, 0.7),
|
|
0 0 40px rgba(75, 0, 130, 0.5),
|
|
inset 0 0 15px rgba(0, 255, 255, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 30px rgba(138, 43, 226, 0.9),
|
|
0 0 60px rgba(75, 0, 130, 0.7),
|
|
inset 0 0 25px rgba(0, 255, 255, 0.5);
|
|
}
|
|
}
|
|
|
|
/* 中心标志 */
|
|
.logo {
|
|
position: relative;
|
|
font-size: 3.5rem;
|
|
font-weight: bold;
|
|
background: linear-gradient(45deg, #8a2be2, #00ffff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
|
|
z-index: 2;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* 霓虹光环效果 */
|
|
.halo {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, transparent 70%);
|
|
animation: rotate 20s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 数据流粒子效果 */
|
|
.particles {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
background: rgba(0, 255, 255, 0.7);
|
|
border-radius: 50%;
|
|
animation: float linear infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0) translateX(0); opacity: 0; }
|
|
50% { opacity: 1; }
|
|
100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
|
|
}
|
|
|
|
/* 控制面板 */
|
|
.controls {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.color-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.color-btn:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 500px) {
|
|
.avatar-container {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="avatar-container" id="avatar">
|
|
<div class="halo"></div>
|
|
<div class="particles" id="particles"></div>
|
|
<div class="logo">TN</div>
|
|
<div class="controls">
|
|
<div class="color-btn" style="background: linear-gradient(45deg, #8a2be2, #00ffff);" onclick="changeColor('purple-cyan')"></div>
|
|
<div class="color-btn" style="background: linear-gradient(45deg, #ff00ff, #00ff00);" onclick="changeColor('pink-green')"></div>
|
|
<div class="color-btn" style="background: linear-gradient(45deg, #ff8c00, #ff0080);" onclick="changeColor('orange-pink')"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 创建粒子效果
|
|
function createParticles() {
|
|
const container = document.getElementById('particles');
|
|
const particleCount = 30;
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
|
|
// 随机大小
|
|
const size = Math.random() * 3 + 1;
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
|
|
// 随机位置
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.top = `${posY}%`;
|
|
|
|
// 随机动画
|
|
const duration = Math.random() * 5 + 3;
|
|
const delay = Math.random() * 5;
|
|
particle.style.animation = `float ${duration}s linear ${delay}s infinite`;
|
|
|
|
container.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// 改变颜色主题
|
|
function changeColor(theme) {
|
|
const avatar = document.getElementById('avatar');
|
|
const logo = document.querySelector('.logo');
|
|
|
|
// 移除所有颜色类
|
|
avatar.classList.remove('purple-cyan', 'pink-green', 'orange-pink');
|
|
logo.classList.remove('purple-cyan', 'pink-green', 'orange-pink');
|
|
|
|
// 添加新颜色类
|
|
avatar.classList.add(theme);
|
|
|
|
// 根据主题改变渐变
|
|
switch(theme) {
|
|
case 'purple-cyan':
|
|
logo.style.background = 'linear-gradient(45deg, #8a2be2, #00ffff)';
|
|
avatar.style.boxShadow = '0 0 20px rgba(138, 43, 226, 0.7), 0 0 40px rgba(75, 0, 130, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.3)';
|
|
break;
|
|
case 'pink-green':
|
|
logo.style.background = 'linear-gradient(45deg, #ff00ff, #00ff00)';
|
|
avatar.style.boxShadow = '0 0 20px rgba(255, 0, 255, 0.7), 0 0 40px rgba(0, 255, 0, 0.5), inset 0 0 15px rgba(255, 255, 0, 0.3)';
|
|
break;
|
|
case 'orange-pink':
|
|
logo.style.background = 'linear-gradient(45deg, #ff8c00, #ff0080)';
|
|
avatar.style.boxShadow = '0 0 20px rgba(255, 140, 0, 0.7), 0 0 40px rgba(255, 0, 128, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.3)';
|
|
break;
|
|
}
|
|
|
|
// 更新动画关键帧
|
|
updatePulseAnimation(theme);
|
|
}
|
|
|
|
// 更新脉冲动画颜色
|
|
function updatePulseAnimation(theme) {
|
|
const styleSheet = document.styleSheets[0];
|
|
let rules = styleSheet.cssRules || styleSheet.rules;
|
|
|
|
// 查找并更新脉冲动画
|
|
for (let i = 0; i < rules.length; i++) {
|
|
if (rules[i].name === 'pulse') {
|
|
let newRule;
|
|
|
|
switch(theme) {
|
|
case 'purple-cyan':
|
|
newRule = `
|
|
0% {
|
|
box-shadow:
|
|
0 0 20px rgba(138, 43, 226, 0.7),
|
|
0 0 40px rgba(75, 0, 130, 0.5),
|
|
inset 0 0 15px rgba(0, 255, 255, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 30px rgba(138, 43, 226, 0.9),
|
|
0 0 60px rgba(75, 0, 130, 0.7),
|
|
inset 0 0 25px rgba(0, 255, 255, 0.5);
|
|
}
|
|
`;
|
|
break;
|
|
case 'pink-green':
|
|
newRule = `
|
|
0% {
|
|
box-shadow:
|
|
0 0 20px rgba(255, 0, 255, 0.7),
|
|
0 0 40px rgba(0, 255, 0, 0.5),
|
|
inset 0 0 15px rgba(255, 255, 0, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 30px rgba(255, 0, 255, 0.9),
|
|
0 0 60px rgba(0, 255, 0, 0.7),
|
|
inset 0 0 25px rgba(255, 255, 0, 0.5);
|
|
}
|
|
`;
|
|
break;
|
|
case 'orange-pink':
|
|
newRule = `
|
|
0% {
|
|
box-shadow:
|
|
0 0 20px rgba(255, 140, 0, 0.7),
|
|
0 0 40px rgba(255, 0, 128, 0.5),
|
|
inset 0 0 15px rgba(255, 215, 0, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 30px rgba(255, 140, 0, 0.9),
|
|
0 0 60px rgba(255, 0, 128, 0.7),
|
|
inset 0 0 25px rgba(255, 215, 0, 0.5);
|
|
}
|
|
`;
|
|
break;
|
|
}
|
|
|
|
// 删除旧的关键帧规则
|
|
styleSheet.deleteRule(i);
|
|
|
|
// 添加新的关键帧规则
|
|
styleSheet.insertRule(`@keyframes pulse { ${newRule} }`, i);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
window.onload = function() {
|
|
createParticles();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |