chore(git): 停止跟踪 TempLate/FTP 二进制分发目录
git rm --cached 移除 7 个已入库文件(LOVE.html/YELLOW*.zip/music_resourcepack.zip/skin*.png/title.html,本地文件保留),与 .gitignore 新增的 /TempLate/FTP/ 规则保持一致。 注:这些文件仍存在于历史提交中,索引减约 71MB;如需彻底瘦身需重写历史。
This commit is contained in:
1 parent
82988ca105
commit
888d5c024f
7 files changed
-477
No files matched your search
@@ -1,269 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chaotic Dreamscape</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.redemption {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
will-change: transform, opacity, color;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 0 5px currentColor;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.glow {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(255,0,0,0.2) 0%,
|
||||
rgba(255,0,0,0) 70%);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
animation: pulse 8s infinite alternate;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(0.8); opacity: 0.1; }
|
||||
100% { transform: scale(1.2); opacity: 0.4; }
|
||||
}
|
||||
@keyframes colorShift {
|
||||
0% { color: red; }
|
||||
25% { color: magenta; }
|
||||
50% { color: cyan; }
|
||||
75% { color: yellow; }
|
||||
100% { color: red; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="glow"></div>
|
||||
<script>
|
||||
const translations = [
|
||||
"救赎", "渴望", "求", "爱", "喜欢", "颤抖", "请求", "拜托",
|
||||
"无解", "普通", "羞涩", "平凡", "罢了", "流泪", "脆弱", "呜咽", "黎明", "陪伴",
|
||||
"泪水", "无妨", "失落", "我会", "忍耐", "释放", "安慰", "心弦", "以爱为名",
|
||||
"依赖", "任性", "美好", "痛楚", "不可知", "感同身受", "不分担", "不负责任",
|
||||
"深渊", "窥见", "懊悔", "拜托", "遗憾",
|
||||
"我知道你的想法", "我都明白", "我都知晓", "诚实些,说出来吧", "早已看穿", "别再隐瞒",
|
||||
"有用吗?", "让我安慰你吧", "救赎于梦魇之中", "我都清楚", "独自一人的模样", "我渴望你",
|
||||
"我都了然", "将脆弱藏于心底", "不必遮掩", "直至黎明曙光", "无论如何,我都能接受",
|
||||
"别在忍耐了!", "微微颤抖的深夜", "轻声呜咽的轮廓中", "低语着脆弱", "在寂夜的独唱中飘摇",
|
||||
"我将伴你身旁", "更多的泪水也无妨", "无论多少次", "我都会接住你的失落", "请别忍耐了",
|
||||
"释放你心中所想吧", "不要在意他们的看法",
|
||||
"别离开", "抱紧我", "我害怕", "我不想失去你", "别哭了", "看着我",
|
||||
"相信我", "我需要你", "别消失", "我在,我一直都在",
|
||||
"求你原谅我", "无论如何,我会一直等你",
|
||||
"共同瞭望同一个方向。", "无论如何,我都会满足你", "求求你,我错了,我真的错了",
|
||||
"向着理想前进", "一中,我必定会来!"
|
||||
];
|
||||
|
||||
// 扩展颜色选项
|
||||
const colors = [
|
||||
'#ff0000', '#ff3366', '#ff6699', '#ff9933',
|
||||
'#ffff00', '#33ff33', '#00ffff', '#3399ff',
|
||||
'#9966ff', '#ff00ff'
|
||||
];
|
||||
|
||||
// 对象池增强
|
||||
const elementPool = [];
|
||||
const MAX_ELEMENTS = 300; // 增加最大元素数量
|
||||
|
||||
function createElement() {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'redemption';
|
||||
document.body.appendChild(element);
|
||||
return element;
|
||||
}
|
||||
|
||||
function getElement() {
|
||||
if (elementPool.length > 0) {
|
||||
return elementPool.pop();
|
||||
}
|
||||
return createElement();
|
||||
}
|
||||
|
||||
function releaseElement(element) {
|
||||
if (elementPool.length < MAX_ELEMENTS) {
|
||||
elementPool.push(element);
|
||||
} else {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 添加随机运动路径
|
||||
function getRandomMovement() {
|
||||
return {
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2,
|
||||
rotation: (Math.random() - 0.5) * 2
|
||||
};
|
||||
}
|
||||
|
||||
// 动画主逻辑增强
|
||||
function animate() {
|
||||
const element = getElement();
|
||||
|
||||
// 随机属性增强
|
||||
const x = Math.random() * window.innerWidth;
|
||||
const y = Math.random() * window.innerHeight;
|
||||
const size = 8 + Math.random() * 40;
|
||||
const zIndex = Math.floor(1 + Math.random() * 50);
|
||||
const translation = translations[Math.floor(Math.random() * translations.length)];
|
||||
const duration = 2000 + Math.random() * 5000; // 2-7秒动画
|
||||
const color = colors[Math.floor(Math.random() * colors.length)];
|
||||
const movement = getRandomMovement();
|
||||
|
||||
// 初始样式增强
|
||||
element.textContent = translation;
|
||||
element.style.left = `${x}px`;
|
||||
element.style.top = `${y}px`;
|
||||
element.style.fontSize = `${size}px`;
|
||||
element.style.zIndex = zIndex;
|
||||
element.style.opacity = '0';
|
||||
element.style.color = color;
|
||||
|
||||
// 随机决定是否添加颜色动画
|
||||
if (Math.random() > 0.7) {
|
||||
element.style.animation = `colorShift ${3 + Math.random() * 5}s infinite`;
|
||||
}
|
||||
|
||||
// 随机决定是否添加模糊效果
|
||||
if (Math.random() > 0.5) {
|
||||
element.style.filter = `blur(${Math.random()}px)`;
|
||||
}
|
||||
|
||||
// 淡入动画增强
|
||||
let start = null;
|
||||
let currentX = x;
|
||||
let currentY = y;
|
||||
let currentRotation = 0;
|
||||
|
||||
function updatePosition(timestamp) {
|
||||
if (!start) start = timestamp;
|
||||
const elapsed = timestamp - start;
|
||||
const progress = elapsed / duration;
|
||||
|
||||
// 动态移动
|
||||
currentX += movement.x;
|
||||
currentY += movement.y;
|
||||
currentRotation += movement.rotation;
|
||||
|
||||
// 边界检查
|
||||
if (currentX < 0) currentX = window.innerWidth;
|
||||
if (currentX > window.innerWidth) currentX = 0;
|
||||
if (currentY < 0) currentY = window.innerHeight;
|
||||
if (currentY > window.innerHeight) currentY = 0;
|
||||
|
||||
// 更新位置
|
||||
element.style.left = `${currentX}px`;
|
||||
element.style.top = `${currentY}px`;
|
||||
element.style.transform = `rotate(${currentRotation}deg)`;
|
||||
|
||||
// 淡入淡出控制
|
||||
if (progress < 0.2) {
|
||||
// 淡入阶段
|
||||
element.style.opacity = (progress / 0.2).toString();
|
||||
} else if (progress > 0.8) {
|
||||
// 淡出阶段
|
||||
element.style.opacity = ((1 - progress) / 0.2).toString();
|
||||
} else {
|
||||
// 保持可见
|
||||
element.style.opacity = '1';
|
||||
}
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updatePosition);
|
||||
} else {
|
||||
releaseElement(element);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updatePosition);
|
||||
}
|
||||
|
||||
// 更快的生成频率
|
||||
let lastTime = 0;
|
||||
function generateElements(timestamp) {
|
||||
if (!lastTime) lastTime = timestamp;
|
||||
if (timestamp - lastTime > 10) { // 每10ms生成一个
|
||||
animate();
|
||||
lastTime = timestamp;
|
||||
}
|
||||
requestAnimationFrame(generateElements);
|
||||
}
|
||||
|
||||
// 启动生成
|
||||
requestAnimationFrame(generateElements);
|
||||
|
||||
// 添加背景粒子效果
|
||||
function createBackgroundParticles() {
|
||||
const particleCount = 50;
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.style.position = 'fixed';
|
||||
particle.style.width = `${1 + Math.random() * 2}px`;
|
||||
particle.style.height = particle.style.width;
|
||||
particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
particle.style.borderRadius = '50%';
|
||||
particle.style.left = `${Math.random() * 100}%`;
|
||||
particle.style.top = `${Math.random() * 100}%`;
|
||||
particle.style.opacity = '0.5';
|
||||
particle.style.zIndex = '-1';
|
||||
particle.style.pointerEvents = 'none';
|
||||
document.body.appendChild(particle);
|
||||
|
||||
// 粒子动画
|
||||
animateParticle(particle);
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticle(particle) {
|
||||
const duration = 10000 + Math.random() * 20000;
|
||||
const startX = parseFloat(particle.style.left);
|
||||
const startY = parseFloat(particle.style.top);
|
||||
const endX = startX + (Math.random() - 0.5) * 20;
|
||||
const endY = startY + (Math.random() - 0.5) * 20;
|
||||
const startTime = performance.now();
|
||||
|
||||
function updateParticle(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = elapsed / duration;
|
||||
|
||||
if (progress < 1) {
|
||||
const x = startX + (endX - startX) * progress;
|
||||
const y = startY + (endY - startY) * progress;
|
||||
particle.style.left = `${x}%`;
|
||||
particle.style.top = `${y}%`;
|
||||
particle.style.opacity = 0.2 + 0.3 * Math.abs(Math.sin(progress * Math.PI * 2));
|
||||
requestAnimationFrame(updateParticle);
|
||||
} else {
|
||||
// 重置粒子位置
|
||||
particle.style.left = `${Math.random() * 100}%`;
|
||||
particle.style.top = `${Math.random() * 100}%`;
|
||||
animateParticle(particle);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateParticle);
|
||||
}
|
||||
|
||||
// 启动背景粒子
|
||||
createBackgroundParticles();
|
||||
|
||||
// 窗口大小调整处理
|
||||
window.addEventListener('resize', () => {
|
||||
// 现有元素会自然完成动画,新元素自动适应新尺寸
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 439 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -1,208 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GVSDS Animation</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 配置Tailwind自定义颜色和字体 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#165DFF',
|
||||
secondary: '#7B61FF',
|
||||
accent: '#00CFFD',
|
||||
dark: '#1D2939',
|
||||
light: '#F9FAFB'
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
poppins: ['Poppins', 'sans-serif']
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
.bg-gradient-hero {
|
||||
background: linear-gradient(135deg, #1D2939 0%, #344054 100%);
|
||||
}
|
||||
.letter-appear {
|
||||
animation: appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-15px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 引入Google字体 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gradient-hero min-h-screen flex flex-col items-center justify-center p-4 font-inter text-light overflow-x-hidden">
|
||||
<!-- 粒子背景 -->
|
||||
<div id="particles" class="fixed inset-0 z-0 opacity-30"></div>
|
||||
|
||||
<div class="container mx-auto flex flex-col items-center z-10">
|
||||
<!-- 主标题区域 -->
|
||||
<div class="relative w-full flex justify-center my-12">
|
||||
<svg id="gvsds-svg" class="w-full max-w-4xl" viewBox="0 0 186.624 65.96" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke-width="0.25mm" fill="url(#gradient)" style="stroke-width:0.25mm;">
|
||||
<!-- 每个字母将通过JS单独处理 -->
|
||||
</g>
|
||||
<!-- 渐变定义 -->
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#00CFFD" />
|
||||
<stop offset="50%" stop-color="#7B61FF" />
|
||||
<stop offset="100%" stop-color="#165DFF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 副标题区域 -->
|
||||
<div class="text-center mt-8 animate-float">
|
||||
<h2 class="text-[clamp(1.2rem,3vw,1.8rem)] font-poppins font-medium text-accent mb-2 opacity-0" id="subtitle-en">
|
||||
Galaxy Vantone Software Development Studio
|
||||
</h2>
|
||||
<h3 class="text-[clamp(1rem,2vw,1.4rem)] font-poppins text-light/80 opacity-0" id="subtitle-zh">
|
||||
银河锋锐软件开发工作室
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- 装饰元素 -->
|
||||
<div class="flex justify-center items-center gap-4 mt-12">
|
||||
<div class="h-px w-24 bg-gradient-to-r from-transparent to-primary/50"></div>
|
||||
<div class="text-primary/70">
|
||||
<i class="fa fa-code text-2xl"></i>
|
||||
</div>
|
||||
<div class="h-px w-24 bg-gradient-to-l from-transparent to-primary/50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="mt-auto py-6 text-center text-light/50 text-sm z-10">
|
||||
<p>© 2023 GVSDS. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 字母路径数据 - 从原始SVG提取的G, V, S, D, S五个字母的路径
|
||||
const letterPaths = [
|
||||
// G
|
||||
"M 26.406 42.755 L 26.556 41.805 Q 22.606 43.455 18.806 43.455 Q 13.206 43.455 8.956 41.28 Q 4.706 39.105 2.356 35.105 Q 0.006 31.105 0.006 25.805 Q 0.006 18.405 2.806 12.73 Q 5.606 7.055 10.531 3.93 Q 15.456 0.805 21.556 0.805 Q 27.406 0.805 30.331 3.53 Q 33.256 6.255 33.256 10.755 Q 33.256 13.705 32.181 15.48 Q 31.106 17.255 29.106 17.255 Q 27.756 17.255 26.931 16.605 Q 26.106 15.955 26.106 14.805 Q 26.106 14.305 26.306 13.105 Q 26.606 11.705 26.606 10.905 Q 26.606 8.805 25.331 7.655 Q 24.056 6.505 21.056 6.505 Q 17.406 6.505 14.281 8.605 Q 11.156 10.705 9.256 14.88 Q 7.356 19.055 7.356 24.905 A 13.014 13.014 0 0 0 10.023 33.514 A 10.024 10.024 0 0 0 10.631 34.18 Q 13.906 37.455 20.106 37.455 Q 23.556 37.455 27.306 35.905 L 28.006 29.805 L 22.906 29.805 Q 21.506 29.805 20.756 29.13 Q 20.006 28.455 20.006 26.905 Q 20.006 25.505 20.756 24.705 Q 21.506 23.905 22.756 23.905 L 32.106 23.905 Q 33.206 23.905 33.931 24.63 A 2.203 2.203 0 0 1 34.532 26.261 A 4.028 4.028 0 0 1 34.506 26.705 Q 34.356 28.305 33.506 33.955 L 32.956 37.755 Q 36.956 34.755 40.256 32.555 Q 40.906 32.155 41.406 32.155 Q 42.056 32.155 42.431 32.78 Q 42.806 33.405 42.806 34.355 Q 42.806 35.505 42.456 36.155 Q 42.106 36.805 41.356 37.305 Q 38.406 39.255 31.956 43.705 A 79.876 79.876 0 0 1 29.317 54.202 A 40.299 40.299 0 0 1 26.906 60.005 A 11.627 11.627 0 0 1 22.354 65.136 A 6.9 6.9 0 0 1 19.056 65.955 Q 16.506 65.955 14.906 64.38 Q 13.306 62.805 13.306 60.255 Q 13.306 57.905 14.356 55.505 A 19.792 19.792 0 0 1 17.591 50.731 A 39.888 39.888 0 0 1 18.281 49.955 A 54.915 54.915 0 0 1 23.929 44.724 A 103.482 103.482 0 0 1 26.406 42.755 Z M 19.606 61.105 A 3.203 3.203 0 0 0 21.837 59.232 A 14.885 14.885 0 0 0 22.456 58.155 Q 24.006 55.205 25.356 48.655 Q 21.556 51.905 19.881 54.53 Q 18.206 57.155 18.206 59.155 Q 18.206 61.105 19.606 61.105 Z",
|
||||
|
||||
// V
|
||||
"M 80.556 21.605 Q 81.706 21.605 82.231 22.105 Q 82.756 22.605 82.756 23.405 Q 82.756 24.705 81.981 25.705 Q 81.206 26.705 79.556 26.755 Q 75.556 26.855 72.456 26.155 Q 68.906 33.605 63.881 38.53 A 17.073 17.073 0 0 1 56.684 43.055 A 10.685 10.685 0 0 1 53.806 43.455 A 8.09 8.09 0 0 1 46.301 37.959 A 17.137 17.137 0 0 1 46.056 37.405 A 32.844 32.844 0 0 1 43.895 28.453 A 64.874 64.874 0 0 1 43.506 21.055 A 94.109 94.109 0 0 1 44.463 7.033 A 68.101 68.101 0 0 1 44.756 5.255 A 7.883 7.883 0 0 1 45.954 1.82 A 2.333 2.333 0 0 1 46.031 1.73 Q 46.856 0.805 48.856 0.805 Q 52.156 0.805 52.156 3.655 Q 52.156 3.955 52.056 4.755 A 105.386 105.386 0 0 0 50.593 18.732 A 75.029 75.029 0 0 0 50.556 21.055 A 57.831 57.831 0 0 0 51.005 28.844 A 23.028 23.028 0 0 0 51.831 32.68 A 5.859 5.859 0 0 0 54.322 36.341 A 2.892 2.892 0 0 0 55.656 36.655 A 6.671 6.671 0 0 0 60.085 34.369 A 18.371 18.371 0 0 0 61.306 33.055 Q 64.356 29.455 66.906 24.005 Q 63.856 22.105 62.306 19.08 Q 60.756 16.055 60.756 12.105 Q 60.756 8.155 61.981 5.43 Q 63.206 2.705 65.331 1.355 Q 67.456 0.005 70.056 0.005 Q 73.256 0.005 75.131 2.305 Q 77.006 4.605 77.006 8.605 A 35.787 35.787 0 0 1 74.809 20.309 A 51.661 51.661 0 0 1 74.506 21.155 Q 77.156 21.605 80.556 21.605 Z M 65.806 11.755 Q 65.806 16.655 68.956 19.005 Q 70.906 13.405 70.906 9.755 Q 70.906 7.655 70.356 6.68 Q 69.806 5.705 68.856 5.705 Q 67.506 5.705 66.656 7.28 Q 65.806 8.855 65.806 11.755 Z",
|
||||
|
||||
// S
|
||||
"M 83.083 42.064 A 22.173 22.173 0 0 0 91.856 43.605 A 32.095 32.095 0 0 0 94.235 43.52 A 18.678 18.678 0 0 0 103.831 40.43 Q 108.306 37.255 108.306 31.355 Q 108.306 28.205 106.681 26.055 Q 105.056 23.905 102.756 22.655 A 31.886 31.886 0 0 0 102.463 22.498 A 65.821 65.821 0 0 0 96.656 19.855 A 115.523 115.523 0 0 1 96.268 19.7 A 55.381 55.381 0 0 1 91.756 17.705 Q 90.006 16.805 88.831 15.455 Q 87.656 14.105 87.656 12.205 Q 87.656 9.355 89.931 7.78 A 6.571 6.571 0 0 1 90.453 7.454 A 12.394 12.394 0 0 1 96.506 6.205 Q 99.556 6.205 101.606 7.305 Q 103.656 8.405 103.656 10.505 Q 103.656 10.905 103.506 12.405 Q 103.356 13.205 103.356 14.155 Q 103.356 15.255 104.231 16.055 Q 105.106 16.855 106.406 16.855 Q 108.256 16.855 109.206 15.255 A 9.478 9.478 0 0 0 110.156 10.505 Q 110.156 7.305 108.331 5.105 Q 106.506 2.905 103.456 1.83 Q 100.406 0.755 96.756 0.755 Q 91.856 0.755 88.231 2.305 Q 84.606 3.855 82.681 6.655 Q 80.756 9.455 80.756 13.055 Q 80.756 16.505 82.481 18.83 Q 84.206 21.155 86.631 22.505 A 27.667 27.667 0 0 0 86.707 22.547 A 52.506 52.506 0 0 0 92.906 25.355 A 133.37 133.37 0 0 1 93.092 25.43 A 63.092 63.092 0 0 1 97.556 27.38 Q 99.206 28.205 100.306 29.43 Q 101.406 30.655 101.406 32.355 Q 101.406 35.105 99.006 36.63 Q 96.606 38.155 92.356 38.155 A 28.695 28.695 0 0 1 91.603 38.145 A 13.96 13.96 0 0 1 85.981 37.055 Q 83.706 35.955 83.706 33.705 Q 83.706 33.155 83.781 32.655 Q 83.856 32.155 83.856 31.955 Q 84.006 31.205 84.006 30.205 Q 84.006 29.105 83.156 28.405 Q 82.306 27.705 80.956 27.705 Q 79.106 27.705 78.156 29.155 Q 77.206 30.605 77.206 33.355 Q 77.206 38.555 81.206 41.08 A 13.553 13.553 0 0 0 83.083 42.064 Z",
|
||||
|
||||
// D
|
||||
"M 125.556 43.455 Q 122.656 43.455 119.006 42.955 Q 117.006 42.705 116.256 41.905 A 3.114 3.114 0 0 1 115.594 39.715 A 7.391 7.391 0 0 1 115.606 39.305 A 102.185 102.185 0 0 1 116.632 30.781 A 181.23 181.23 0 0 1 117.256 27.08 Q 118.556 19.805 120.406 13.055 Q 120.756 11.805 121.806 11.305 Q 122.856 10.805 124.556 10.805 A 3.166 3.166 0 0 1 127.42 11.769 A 1.424 1.424 0 0 1 127.606 12.505 Q 127.606 13.205 127.306 14.105 A 74.563 74.563 0 0 0 125.518 20.893 A 150.077 150.077 0 0 0 124.706 24.83 Q 123.406 31.555 122.856 37.655 Q 124.356 37.805 126.256 37.805 A 18.465 18.465 0 0 0 135.835 35.523 A 13.176 13.176 0 0 0 139.331 32.505 A 20.27 20.27 0 0 0 143.55 21.034 A 33.002 33.002 0 0 0 143.656 18.355 A 12.214 12.214 0 0 0 140.413 9.309 A 10.244 10.244 0 0 0 140.256 9.155 A 12.931 12.931 0 0 0 131.42 5.918 A 22.678 22.678 0 0 0 130.656 5.905 Q 126.656 5.905 122.731 7.155 Q 118.806 8.405 115.656 10.455 Q 115.006 10.905 114.256 10.905 A 1.56 1.56 0 0 1 112.906 10.18 Q 112.406 9.455 112.406 8.405 Q 112.406 7.205 112.806 6.43 Q 113.206 5.655 114.156 5.005 Q 117.606 2.655 122.256 1.43 Q 126.906 0.205 131.206 0.205 Q 137.306 0.205 141.756 2.33 Q 146.206 4.455 148.606 8.555 Q 151.006 12.655 151.006 18.455 Q 151.006 26.005 148.006 31.63 Q 145.006 37.255 139.256 40.355 A 28.153 28.153 0 0 1 126.112 43.451 A 40.186 40.186 0 0 1 125.556 43.455 Z",
|
||||
|
||||
// S
|
||||
"M 159.533 42.064 A 22.173 22.173 0 0 0 168.306 43.605 A 32.095 32.095 0 0 0 170.685 43.52 A 18.678 18.678 0 0 0 180.281 40.43 Q 184.756 37.255 184.756 31.355 Q 184.756 28.205 183.131 26.055 Q 181.506 23.905 179.206 22.655 A 31.886 31.886 0 0 0 178.913 22.498 A 65.821 65.821 0 0 0 173.106 19.855 A 115.523 115.523 0 0 1 172.718 19.7 A 55.381 55.381 0 0 1 168.206 17.705 Q 166.456 16.805 165.281 15.455 Q 164.106 14.105 164.106 12.205 Q 164.106 9.355 166.381 7.78 A 6.571 6.571 0 0 1 166.903 7.454 A 12.394 12.394 0 0 1 172.956 6.205 Q 176.006 6.205 178.056 7.305 Q 180.106 8.405 180.106 10.505 Q 180.106 10.905 179.956 12.405 Q 179.806 13.205 179.806 14.155 Q 179.806 15.255 180.681 16.055 Q 181.556 16.855 182.856 16.855 Q 184.706 16.855 185.656 15.255 A 9.478 9.478 0 0 0 186.606 10.505 Q 186.606 7.305 184.781 5.105 Q 182.956 2.905 179.906 1.83 Q 176.856 0.755 173.206 0.755 Q 168.306 0.755 164.681 2.305 Q 161.056 3.855 159.131 6.655 Q 157.206 9.455 157.206 13.055 Q 157.206 16.505 158.931 18.83 Q 160.656 21.155 163.081 22.505 A 27.667 27.667 0 0 0 163.157 22.547 A 52.506 52.506 0 0 0 169.356 25.355 A 133.37 133.37 0 0 1 169.542 25.43 A 63.092 63.092 0 0 1 174.006 27.38 Q 175.656 28.205 176.756 29.43 Q 177.856 30.655 177.856 32.355 Q 177.856 35.105 175.456 36.63 Q 173.056 38.155 168.806 38.155 A 28.695 28.695 0 0 1 168.053 38.145 A 13.96 13.96 0 0 1 162.431 37.055 Q 160.156 35.955 160.156 33.705 Q 160.156 33.155 160.231 32.655 Q 160.306 32.155 160.306 31.955 Q 160.456 31.205 160.456 30.205 Q 160.456 29.105 159.606 28.405 Q 158.756 27.705 157.406 27.705 Q 155.556 27.705 154.606 29.155 Q 153.656 30.605 153.656 33.355 Q 153.656 38.555 157.656 41.08 A 13.553 13.553 0 0 0 159.533 42.064 Z"
|
||||
];
|
||||
|
||||
// 创建字母并添加动画
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const svgGroup = document.getElementById('svgGroup');
|
||||
|
||||
// 清除默认内容
|
||||
svgGroup.innerHTML = '';
|
||||
|
||||
// 逐个创建字母路径元素
|
||||
letterPaths.forEach((pathData, index) => {
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
path.setAttribute('d', pathData);
|
||||
path.setAttribute('opacity', '0');
|
||||
path.setAttribute('transform', 'scale(0.8)');
|
||||
path.setAttribute('class', 'letter');
|
||||
|
||||
// 添加到SVG组
|
||||
svgGroup.appendChild(path);
|
||||
|
||||
// 延迟显示,实现从左到右的顺序
|
||||
setTimeout(() => {
|
||||
path.style.opacity = '1';
|
||||
path.style.transform = 'scale(1)';
|
||||
path.style.transition = 'all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||||
}, 300 + (index * 400));
|
||||
});
|
||||
|
||||
// 显示副标题
|
||||
setTimeout(() => {
|
||||
document.getElementById('subtitle-en').style.opacity = '1';
|
||||
document.getElementById('subtitle-en').style.transition = 'opacity 1s ease-in-out 0.3s';
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('subtitle-zh').style.opacity = '1';
|
||||
document.getElementById('subtitle-zh').style.transition = 'opacity 1s ease-in-out 0.3s';
|
||||
}, 300);
|
||||
}, 2500);
|
||||
|
||||
// 创建粒子背景
|
||||
createParticles();
|
||||
});
|
||||
|
||||
// 创建粒子背景效果
|
||||
function createParticles() {
|
||||
const particlesContainer = document.getElementById('particles');
|
||||
const particleCount = 50;
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const particle = document.createElement('div');
|
||||
|
||||
// 随机样式
|
||||
const size = Math.random() * 4 + 1;
|
||||
const posX = Math.random() * 100;
|
||||
const posY = Math.random() * 100;
|
||||
const delay = Math.random() * 5;
|
||||
const duration = Math.random() * 10 + 10;
|
||||
|
||||
particle.style.cssText = `
|
||||
position: absolute;
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
background-color: rgba(255, 255, 255, 0.${Math.floor(Math.random() * 5) + 2});
|
||||
border-radius: 50%;
|
||||
top: ${posY}%;
|
||||
left: ${posX}%;
|
||||
animation: float ${duration}s ease-in-out ${delay}s infinite;
|
||||
box-shadow: 0 0 ${size * 3}px rgba(22, 93, 255, 0.${Math.floor(Math.random() * 3) + 2});
|
||||
`;
|
||||
|
||||
particlesContainer.appendChild(particle);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user