返回提示词

Motion Prompt #155|悬停切换图片 · Image swap on hover

悬停时换成另一张照片

发布于 更新于 浏览 0

部分附加信息、来源说明或示例仍显示原文。

来源:import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0397/original.md · 授权:MIT License Copyright (c) 2026 Shohei Ohtaki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

使用示例

提示词正文

请使用“Image swap on hover”(ホバーで画像切り替え),它是“Landing page & web effects, part 2”中的一个名称。
Motion Prompt #155

定义:悬停时将照片切换为另一个视角。
示例展示:光标停在商品卡上时,T恤正面照片交叉淡化为背面;离开后恢复正面。
规格:
- 视口511×168,两张商品卡的照片框为196×112、圆角半径8,下方为名称与价格。光标先后停留左卡、右卡,各约1.3 s。单次4.7 s,在9.4 s包循环内播放两次。
- 悬停时在0.3 s内以二次ease-in-out从正面照片(胸口小点)交叉淡化至背面照片(背部大星形);离开时同样0.3 s淡回。
- 照片下方两个半径3的圆点指示当前照片,深色点代表当前项。
- 悬停区域为整张卡,包括名称;边框、名称与价格不移动。
何时使用:用于电商商品网格,无需离开列表即可查看另一角度或模特上身图。

参考实现(Canvas 2D,画面仅由时间决定的函数):https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/155.txt
共享辅助代码:https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js
请保持参考实现的形状、时间安排和缓动数值不变,只调整文字、颜色和素材,以适配我正在制作的项目。

使用示例

示例输入

请实现“悬停切换图片 · Image swap on hover”:悬停时换成另一张照片

示意结果

下方是来源作者提供的静态画面和可播放动效参考,并非本站对该提示词调用模型生成的结果。

提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。