diff --git a/src/app/globals.css b/src/app/globals.css index c8e3a41..ba4907b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -174,72 +174,3 @@ div[data-media-provider] video { display: none !important; } } - -/* WebKit 动画性能优化类 - 修复视频卡片动画闪烁和卡顿 */ -.webkit-animation-fix { - /* 启用硬件加速 */ - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - - /* 防止WebKit动画闪烁 */ - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - - /* 设置透视,改善3D变换性能 */ - -webkit-perspective: 1000px; - perspective: 1000px; - - /* 优化动画性能 */ - will-change: transform, opacity; - - /* 强制创建新的层叠上下文 */ - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; - - /* 确保动画平滑 */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* 为子元素提供动画优化 */ -.webkit-animation-fix * { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - -/* 特别优化hover状态的性能 */ -.webkit-animation-fix:hover { - /* 在hover时明确设置will-change */ - will-change: transform, opacity, filter; -} - -/* 避免不必要的重绘 */ -.webkit-animation-fix:not(:hover) { - will-change: auto; -} - -/* 播放logo WebKit修复 - 精确控制fill动画避免闪烁 */ -.play-icon-fixed { - --icon-fill: transparent; - --icon-scale: 1; - - color: white; - fill: var(--icon-fill); - transform: scale(var(--icon-scale)); - - /* 分别控制每个属性的动画时长,避免WebKit闪烁 */ - transition: fill 0.2s ease-out, transform 0.2s ease-out; - - /* WebKit硬件加速和防闪烁 */ - -webkit-transform: scale(var(--icon-scale)) translateZ(0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - will-change: transform, fill, opacity; -} - -.play-icon-fixed:hover { - --icon-fill: rgb(34, 197, 94); /* green-500 */ - --icon-scale: 1.1; -} diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx index bad8452..2f09f98 100644 --- a/src/components/VideoCard.tsx +++ b/src/components/VideoCard.tsx @@ -262,7 +262,7 @@ export default function VideoCard({ )}