64 lines
4.6 KiB
HTML
64 lines
4.6 KiB
HTML
<script>
|
|
document.body.classList.add("overflow-hidden");
|
|
</script>
|
|
|
|
<section class="min-h-screen flex items-center justify-center relative pt-16 overflow-hidden">
|
|
<!-- 粒子背景（新增加载动画） -->
|
|
<div id="particles-js" class="particles-container" style="opacity: 0; transition: opacity 1.2s ease-in-out;"></div>
|
|
<div id="card-container" class="relative w-[100%] h-[100svh] border-0 rounded-xl transition-all duration-700 ease-in-out overflow-hidden">
|
|
<!-- 文字容器（新增滚动触发动画） -->
|
|
<div id="text-container" class="absolute left-0 top-0 h-full flex items-center justify-center px-6 opacity-0 transition-opacity duration-700 ease-in-out z-10"
|
|
style="display: flex; padding-top: 0;">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="container mx-auto px-4 md:px-8 relative z-10">
|
|
<div class="max-w-5xl mx-auto text-center" style="display: flex; flex-direction: column; justify-content: center;">
|
|
<div class="h-[15vh] w-full"></div>
|
|
<h1 id="main-title" class="text-item text-[8vw] md:text-[6vw] lg:text-[5vw] font-extrabold text-white leading-tight mb-4 opacity-0 transform translate-x-[-50px] transition-all duration-1200 ease-out"
|
|
style="text-shadow: 0 0 15px rgba(255,255,255,0.3);">
|
|
GVSDS
|
|
</h1>
|
|
<h2 id="sub-title" class="text-item text-[3vw] md:text-[2vw] lg:text-[1.8vw] font-normal text-white mb-6 opacity-0 transform translate-x-[50px] transition-all duration-800 ease-out delay-400">
|
|
银河锋锐软件开发工作室
|
|
</h2>
|
|
<p id="tag-text-1" class="text-item text-[1.5vw] md:text-[1.2vw] lg:text-[1vw] text-gray-300 font-medium opacity-0 transition-all duration-500 ease-out delay-800 hover:scale-105">
|
|
非盈利·技术驱动·兴趣聚合
|
|
</p>
|
|
<p id="tag-text-2" class="text-item text-[1.5vw] md:text-[1.2vw] lg:text-[1vw] text-gray-300 font-medium opacity-0 transition-opacity duration-500 ease-out delay-800 mt-2">
|
|
<span class="typewriter typetext"></span>
|
|
</p>
|
|
</div>
|
|
<!-- 分割线（新增滚动渐显） -->
|
|
<div class="flex flex-col items-center mt-8 md:mt-12 mx-auto opacity-0 transition-opacity duration-800 ease-out delay-1200" id="line-container">
|
|
<div class="line-item w-1/2 h-0.5 bg-white/30 mb-5 transition-all duration-500 hover:w-3/4"></div>
|
|
<div class="line-item w-1/3 h-0.5 bg-white/60 mb-5 transition-all duration-500 hover:w-2/4"></div>
|
|
<div class="line-item w-1/4 h-0.5 bg-white/90 transition-all duration-500 hover:w-1/4"></div>
|
|
</div>
|
|
<!-- 新增向下滚动指引（动画箭头） -->
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 opacity-0 transition-opacity duration-800 ease-out delay-1500" id="scroll-indicator">
|
|
<a href="#about" class="flex flex-col items-center text-white/80 hover:text-white">
|
|
<span class="text-sm mb-2">向下探索</span>
|
|
<i class="fa fa-chevron-down animate-bounce"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- SVG背景（新增悬停旋转效果） -->
|
|
<div id="svg-wrapper" class="absolute inset-0 flex items-center justify-center transition-all duration-700 ease-in-out z-0" style="opacity: 0;">
|
|
<object id="svg-container"
|
|
data="/assets/icon/ICON.svg"
|
|
type="image/svg+xml"
|
|
class="svg-container svg-container-desktop md:svg-container-desktop xs:svg-container-mobile object-contain transition-all duration-1000 ease-in-out"
|
|
style="will-change: transform;">
|
|
<div class="text-white text-center p-8">
|
|
<i class="fa fa-exclamation-triangle text-4xl mb-4 text-yellow-400"></i>
|
|
<p>无法加载SVG文件</p>
|
|
<p class="text-sm text-gray-400 mt-2">请检查文件路径是否正确</p>
|
|
</div>
|
|
</object>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="/assets/js/icon.js"></script>
|