initnal
This commit is contained in:
+325
@@ -0,0 +1,325 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user