208 lines
15 KiB
HTML
208 lines
15 KiB
HTML
<!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> |