326 lines
10 KiB
HTML
326 lines
10 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>S.A. MainPage</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
overflow: hidden;
|
|
background-color: #000;
|
|
color: #fff;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 双Canvas背景设置 */
|
|
#starCanvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#trailCanvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* 内容容器 */
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
/* Logo样式 */
|
|
.logo-container {
|
|
margin-top: 5vh;
|
|
text-align: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 0 30px rgba(100, 150, 255, 0.3);
|
|
}
|
|
|
|
.logo {
|
|
width: 180px;
|
|
height: 180px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 3px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 0 30px rgba(100, 150, 255, 0.5);
|
|
}
|
|
|
|
.logo-title {
|
|
margin-top: 15px;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
letter-spacing: 2px;
|
|
color: #fff;
|
|
text-shadow: 0 0 10px rgba(100, 150, 255, 0.8);
|
|
}
|
|
|
|
/* 按钮容器 */
|
|
.buttons-container {
|
|
margin-bottom: 10vh;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
padding: 18px 30px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
background: rgba(40, 80, 160, 0.6);
|
|
border: 2px solid rgba(100, 150, 255, 0.5);
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: rgba(60, 120, 220, 0.8);
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(100, 150, 255, 0.5);
|
|
border-color: rgba(150, 200, 255, 0.8);
|
|
}
|
|
|
|
.btn:nth-child(2) {
|
|
background: rgba(160, 40, 80, 0.6);
|
|
border: 2px solid rgba(255, 100, 150, 0.5);
|
|
}
|
|
|
|
.btn:nth-child(2):hover {
|
|
background: rgba(220, 60, 120, 0.8);
|
|
box-shadow: 0 8px 20px rgba(255, 100, 150, 0.5);
|
|
border-color: rgba(255, 150, 200, 0.8);
|
|
}
|
|
|
|
/* 页脚 */
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
z-index: 3;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.logo {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
|
|
.logo-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.buttons-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.btn {
|
|
width: 80%;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 用于绘制星星本体的画布 -->
|
|
<canvas id="starCanvas"></canvas>
|
|
<!-- 用于绘制星轨轨迹的画布 -->
|
|
<canvas id="trailCanvas"></canvas>
|
|
|
|
<!-- 内容区域 -->
|
|
<div class="content">
|
|
<div class="logo-container">
|
|
<img src="https://raw.atomgit.com/snoware/res/raw/main/swe_logo.png" alt="网站Logo" class="logo">
|
|
<div class="logo-title">SNOWARE</div>
|
|
</div>
|
|
|
|
<div class="buttons-container">
|
|
<a href="https://swe-iss.rth1.xyz/res" class="btn">[ISS]资源下载</a>
|
|
<a href="https://www.bilibili.com/video/BV19b411G7hq" class="btn">一起听音乐</a>
|
|
<a href="https://swe-iss.rth1.xyz/softwares" class="btn">我的作品</a>
|
|
<a href="https://space.bilibili.com/1875249243" class="btn">B站空间</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
2025 * S.A. | SNOWARE
|
|
</div>
|
|
|
|
<script>
|
|
// 获取画布元素和上下文
|
|
const starCanvas = document.getElementById('starCanvas');
|
|
const starCtx = starCanvas.getContext('2d');
|
|
const trailCanvas = document.getElementById('trailCanvas');
|
|
const trailCtx = trailCanvas.getContext('2d');
|
|
|
|
let stars = []; // 存储星星数据的数组
|
|
let animationId = null;
|
|
|
|
// 初始化设置
|
|
function init() {
|
|
// 设置画布尺寸为窗口大小
|
|
starCanvas.width = window.innerWidth;
|
|
starCanvas.height = window.innerHeight;
|
|
trailCanvas.width = window.innerWidth;
|
|
trailCanvas.height = window.innerHeight;
|
|
|
|
createStars(300); // 创建星星
|
|
animate(); // 开始动画循环
|
|
|
|
// 添加窗口大小调整监听
|
|
window.addEventListener('resize', handleResize);
|
|
}
|
|
|
|
// 创建星星数组
|
|
function createStars(count) {
|
|
const starColors = ['#ffffff', '#a8c9ff', '#fffacd', '#ffb6c1']; // 星星颜色数组
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
// 随机分布在屏幕上
|
|
const x = Math.random() * starCanvas.width;
|
|
const y = Math.random() * starCanvas.height;
|
|
|
|
stars.push({
|
|
x: x,
|
|
y: y,
|
|
size: Math.random() * 1.5 + 0.5, // 随机大小
|
|
color: starColors[Math.floor(Math.random() * starColors.length)], // 随机颜色
|
|
blinkPhase: Math.random() * Math.PI * 2, // 闪烁相位
|
|
blinkSpeed: Math.random() * 0.02 + 0.01, // 闪烁速度
|
|
twinkleFactor: Math.random() // 闪烁因子，控制闪烁强度
|
|
});
|
|
}
|
|
}
|
|
|
|
// 动画循环
|
|
function animate() {
|
|
updateStars(); // 更新星星状态
|
|
draw(); // 绘制画面
|
|
animationId = requestAnimationFrame(animate); // 继续下一帧动画
|
|
}
|
|
|
|
// 更新所有星星的状态（只更新闪烁）
|
|
function updateStars() {
|
|
stars.forEach(star => {
|
|
star.blinkPhase += star.blinkSpeed; // 更新闪烁相位
|
|
});
|
|
}
|
|
|
|
// 绘制整个场景
|
|
function draw() {
|
|
drawBackground();
|
|
drawStars();
|
|
}
|
|
|
|
// 绘制背景（微弱的星云效果）
|
|
function drawBackground() {
|
|
// 在轨迹画布上添加半透明黑色矩形
|
|
trailCtx.fillStyle = 'rgba(10, 10, 30, 0.1)';
|
|
trailCtx.fillRect(0, 0, trailCanvas.width, trailCanvas.height);
|
|
}
|
|
|
|
// 绘制星星
|
|
function drawStars() {
|
|
// 清除星星画布
|
|
starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
|
|
|
|
stars.forEach(star => {
|
|
// 计算闪烁效果（使用正弦函数）
|
|
const blinkIntensity = (Math.sin(star.blinkPhase) + 1) / 2;
|
|
const twinkleIntensity = blinkIntensity * star.twinkleFactor;
|
|
const currentSize = star.size * (0.7 + twinkleIntensity * 0.6); // 大小也随闪烁变化
|
|
|
|
// 在星星画布上绘制星星本体
|
|
starCtx.beginPath();
|
|
starCtx.fillStyle = star.color;
|
|
starCtx.globalAlpha = 0.6 + twinkleIntensity * 0.4; // 透明度随闪烁变化
|
|
starCtx.arc(star.x, star.y, currentSize, 0, Math.PI * 2);
|
|
starCtx.fill();
|
|
|
|
// 添加光晕效果
|
|
const gradient = starCtx.createRadialGradient(
|
|
star.x, star.y, 0,
|
|
star.x, star.y, currentSize * 3
|
|
);
|
|
gradient.addColorStop(0, star.color);
|
|
gradient.addColorStop(0.5, star.color.replace(')', ', 0.7)').replace('rgb', 'rgba'));
|
|
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
|
|
|
|
starCtx.fillStyle = gradient;
|
|
starCtx.globalAlpha = 0.3 + twinkleIntensity * 0.3;
|
|
starCtx.beginPath();
|
|
starCtx.arc(star.x, star.y, currentSize * 3, 0, Math.PI * 2);
|
|
starCtx.fill();
|
|
|
|
// 重置透明度
|
|
starCtx.globalAlpha = 1;
|
|
});
|
|
}
|
|
|
|
// 处理窗口大小调整
|
|
function handleResize() {
|
|
// 取消当前动画帧
|
|
if (animationId) {
|
|
cancelAnimationFrame(animationId);
|
|
}
|
|
|
|
// 重置画布尺寸
|
|
starCanvas.width = window.innerWidth;
|
|
starCanvas.height = window.innerHeight;
|
|
trailCanvas.width = window.innerWidth;
|
|
trailCanvas.height = window.innerHeight;
|
|
|
|
// 清空星星数组并重新创建
|
|
stars = [];
|
|
createStars(300); // 重新创建星星
|
|
|
|
// 重新开始动画
|
|
animate();
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
window.addEventListener('load', init);
|
|
</script>
|
|
</body>
|
|
</html>
|