gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
141 lines
3.1 KiB
CSS
141 lines
3.1 KiB
CSS
/* =========================================================
|
||
全局动效样式（首页动态效果）
|
||
零依赖：纯 CSS + 原生 IntersectionObserver（见 reveal.client.ts）
|
||
========================================================= */
|
||
|
||
/* ---------- 滚动渐显（Scroll Reveal） ----------
|
||
初始隐藏仅在 JS 可用（<html class="js">）时生效，避免无 JS 时内容不可见；
|
||
元素进入视口由 reveal.client.ts 加 .is-visible 触发过渡。 */
|
||
.js [data-reveal] {
|
||
opacity: 0;
|
||
transform: translateY(28px);
|
||
transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
|
||
transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||
will-change: opacity, transform;
|
||
}
|
||
.js [data-reveal='left'] {
|
||
transform: translateX(-40px);
|
||
}
|
||
.js [data-reveal='right'] {
|
||
transform: translateX(40px);
|
||
}
|
||
.js [data-reveal='zoom'] {
|
||
transform: scale(0.94);
|
||
}
|
||
.js [data-reveal].is-visible {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* ---------- 首屏背景渐变流动 ---------- */
|
||
.anim-gradient {
|
||
background-size: 200% 200%;
|
||
animation: anim-gradient-shift 16s ease infinite;
|
||
}
|
||
@keyframes anim-gradient-shift {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
/* ---------- 漂浮柔光球 ---------- */
|
||
.anim-blob {
|
||
position: absolute;
|
||
border-radius: 9999px;
|
||
filter: blur(46px);
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
animation: anim-float 9s ease-in-out infinite;
|
||
}
|
||
.anim-blob--2 {
|
||
animation-duration: 13s;
|
||
animation-direction: reverse;
|
||
}
|
||
@keyframes anim-float {
|
||
0%,
|
||
100% {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
50% {
|
||
transform: translate3d(14px, -26px, 0);
|
||
}
|
||
}
|
||
|
||
/* ---------- CTA 按钮光泽扫过 ---------- */
|
||
.anim-shimmer {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.anim-shimmer::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 45%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.5),
|
||
transparent
|
||
);
|
||
transform: translateX(-160%) skewX(-18deg);
|
||
animation: anim-shimmer 3.4s ease-in-out infinite;
|
||
}
|
||
@keyframes anim-shimmer {
|
||
0% {
|
||
transform: translateX(-160%) skewX(-18deg);
|
||
}
|
||
60%,
|
||
100% {
|
||
transform: translateX(280%) skewX(-18deg);
|
||
}
|
||
}
|
||
|
||
/* ---------- 卡片 hover 增强：上浮 + 封面放大 ---------- */
|
||
.anim-card {
|
||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||
}
|
||
.anim-card:hover {
|
||
transform: translateY(-6px);
|
||
}
|
||
.anim-card-media {
|
||
overflow: hidden;
|
||
}
|
||
.anim-card-media img {
|
||
transition: transform 0.55s ease;
|
||
}
|
||
.anim-card:hover .anim-card-media img {
|
||
transform: scale(1.06);
|
||
}
|
||
|
||
/* ---------- 无障碍：关闭所有动效 ---------- */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.js [data-reveal] {
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
transition: none !important;
|
||
}
|
||
.anim-gradient,
|
||
.anim-blob,
|
||
.anim-shimmer::after {
|
||
animation: none !important;
|
||
}
|
||
.anim-card,
|
||
.anim-card-media img {
|
||
transition: none !important;
|
||
}
|
||
.anim-card:hover {
|
||
transform: none !important;
|
||
}
|
||
.anim-card:hover .anim-card-media img {
|
||
transform: none !important;
|
||
}
|
||
}
|