mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-05-19 04:17:29 +08:00
fix: play icon animation
This commit is contained in:
@@ -223,17 +223,14 @@ div[data-media-provider] video {
|
|||||||
/* 播放logo WebKit修复 - 精确控制fill动画避免闪烁 */
|
/* 播放logo WebKit修复 - 精确控制fill动画避免闪烁 */
|
||||||
.play-icon-fixed {
|
.play-icon-fixed {
|
||||||
--icon-fill: transparent;
|
--icon-fill: transparent;
|
||||||
--icon-opacity: 0.8;
|
|
||||||
--icon-scale: 1;
|
--icon-scale: 1;
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
fill: var(--icon-fill);
|
fill: var(--icon-fill);
|
||||||
opacity: var(--icon-opacity);
|
|
||||||
transform: scale(var(--icon-scale));
|
transform: scale(var(--icon-scale));
|
||||||
|
|
||||||
/* 分别控制每个属性的动画时长,避免WebKit闪烁 */
|
/* 分别控制每个属性的动画时长,避免WebKit闪烁 */
|
||||||
transition: fill 0.25s ease-out, opacity 0.25s ease-out,
|
transition: fill 0.2s ease-out, transform 0.2s ease-out;
|
||||||
transform 0.25s ease-out;
|
|
||||||
|
|
||||||
/* WebKit硬件加速和防闪烁 */
|
/* WebKit硬件加速和防闪烁 */
|
||||||
-webkit-transform: scale(var(--icon-scale)) translateZ(0);
|
-webkit-transform: scale(var(--icon-scale)) translateZ(0);
|
||||||
@@ -244,6 +241,5 @@ div[data-media-provider] video {
|
|||||||
|
|
||||||
.play-icon-fixed:hover {
|
.play-icon-fixed:hover {
|
||||||
--icon-fill: rgb(34, 197, 94); /* green-500 */
|
--icon-fill: rgb(34, 197, 94); /* green-500 */
|
||||||
--icon-opacity: 1;
|
|
||||||
--icon-scale: 1.1;
|
--icon-scale: 1.1;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -262,7 +262,7 @@ export default function VideoCard({
|
|||||||
<PlayCircleIcon
|
<PlayCircleIcon
|
||||||
size={50}
|
size={50}
|
||||||
strokeWidth={0.8}
|
strokeWidth={0.8}
|
||||||
className='rounded-full text-white hover:fill-green-500 transition-all duration-200 ease-out hover:scale-110'
|
className='rounded-full play-icon-fixed'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user