- BC20270270's blog
bitch
-
BC20270270
LV 1
@
2025-6-14 14:46:59
功能亮点与互动效果
动态渐变背景
使用CSS3渐变创建星空紫色背景
背景色持续流动变化（15秒循环动画）
支持四种配色方案切换（通过底部按钮）
粒子互动系统
150个动态粒子随机分布
粒子随鼠标移动产生排斥效果
每个粒子有独立浮动动画
中央悬浮球体
半透明发光球体（直径300px）
柔和呼吸浮动效果（上下20px浮动）
实时显示时间和日期信息
色彩主题切换
深空紫（默认）：#0f0c29 → #302b63
海洋蓝：#0f2027 → #2c5364
熔岩红：#8E0E00 → #1F1C18
森林绿：#134E5E → #71B280
使用说明
将代码复制到文本编辑器保存为.html文件
用浏览器打开该文件（建议Chrome/Firefox）
互动操作：
移动鼠标：粒子会避开光标轨迹
点击底部按钮：切换四种配色方案
观察中央球体：时间实时更新并有浮动效果
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星际互动壁纸</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
min-height: 100vh;
background: linear-gradient(125deg, #0f0c29, #302b63, #24243e);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
font-family: 'Arial', sans-serif;
}
#particles {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.floating-ball {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #4a00e0, #8e2de2);
box-shadow: 0 0 80px rgba(142, 45, 226, 0.7),
0 0 150px rgba(74, 0, 224, 0.5);
animation: float 6s ease-in-out infinite;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
text-align: center;
padding: 20px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.time-display {
font-size: 3rem;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
.date-display {
font-size: 1.5rem;
opacity: 0.8;
}
.controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 15px;
}
.color-btn {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 20px;
border-radius: 30px;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.color-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes float {
0% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-20px); }
100% { transform: translate(-50%, -50%) translateY(0); }
}
</style>
</head>
<body>
<div id="particles"></div>
<div class="floating-ball">
<div class="time-display" id="time">00:00:00</div>
<div class="date-display" id="date">2025年6月14日 星期六</div>
</div>
<div class="controls">
<div class="color-btn" data-color="purple">深空紫</div>
<div class="color-btn" data-color="blue">海洋蓝</div>
<div class="color-btn" data-color="red">熔岩红</div>
<div class="color-btn" data-color="green">森林绿</div>
</div>
<script>
// 粒子系统创建
function createParticles() {
const container = document.getElementById('particles');
const particleCount = 150;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.style.position = 'absolute';
particle.style.width = `${Math.random() * 5 + 1}px`;
particle.style.height = particle.style.width;
particle.style.background = 'rgba(255, 255, 255, 0.7)';
particle.style.borderRadius = '50%';
particle.style.left = `${Math.random() * 100}vw`;
particle.style.top = `${Math.random() * 100}vh`;
particle.style.boxShadow = '0 0 10px white';
particle.style.zIndex = '1';
// 动画
particle.animate(
[
{ transform: 'translateY(0)', opacity: Math.random() },
{ transform: `translateY(${Math.random() > 0.5 ? '-' : ''}${20 + Math.random() * 50}px)`, opacity: Math.random() * 0.5 }
],
{
duration: 2000 + Math.random() * 5000,
iterations: Infinity,
direction: 'alternate'
}
);
container.appendChild(particle);
}
// 鼠标互动效果
document.addEventListener('mousemove', (e) => {
const particles = document.querySelectorAll('#particles div');
const mouseX = e.clientX;
const mouseY = e.clientY;
particles.forEach(particle => {
const rect = particle.getBoundingClientRect();
const particleX = rect.left + rect.width / 2;
const particleY = rect.top + rect.height / 2;
const distance = Math.sqrt(
Math.pow(mouseX - particleX, 2) +
Math.pow(mouseY - particleY, 2)
);
if (distance < 150) {
const force = (150 - distance) / 50;
const angle = Math.atan2(
particleY - mouseY,
particleX - mouseX
);
particle.style.transform = `translate(${Math.cos(angle) * force}px, ${Math.sin(angle) * force}px)`;
}
});
});
}
// 更新时间显示
function updateTime() {
const now = new Date();
const timeElement = document.getElementById('time');
const dateElement = document.getElementById('date');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
timeElement.textContent = `${hours}:${minutes}:${seconds}`;
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
const weekday = weekdays[now.getDay()];
dateElement.textContent = `${year}年${month}月${day}日 星期${weekday}`;
}
// 背景颜色切换
function setupColorButtons() {
const buttons = document.querySelectorAll('.color-btn');
buttons.forEach(button => {
button.addEventListener('click', () => {
const color = button.getAttribute('data-color');
let gradient;
switch(color) {
case 'blue':
gradient = 'linear-gradient(125deg, #0f2027, #203a43, #2c5364)';
break;
case 'red':
gradient = 'linear-gradient(125deg, #8E0E00, #1F1C18, #1F1C18)';
break;
case 'green':
gradient = 'linear-gradient(125deg, #134E5E, #71B280, #134E5E)';
break;
default: // purple
gradient = 'linear-gradient(125deg, #0f0c29, #302b63, #24243e)';
}
document.body.style.background = gradient;
});
});
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
createParticles();
updateTime();
setInterval(updateTime, 1000);
setupColorButtons();
});
</script>
</body>
</html>