Motion Prompt #157｜悬停图片预览 · Hover image reveal
悬停列表项时显示对应照片
部分附加信息、来源说明或示例仍显示原文。
来源：import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0399/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:
使用示例提示词正文
请使用“Hover image reveal”（ホバーで画像プレビュー），它是“Landing page & web effects, part 2”中的一个名称。 Motion Prompt #157 定义：悬停列表项时显示对应照片。 示例展示：光标停在纯文字列表某一行时，该行照片在光标旁淡入，并跟随移动。 规格： - 视口511×168，纯文字列表四行，行高39 px、名称17 px。光标逐行向下，每行约1 s。单次4.7 s，在9.4 s包循环内播放两次。 - 悬停行在0.25 s内以三次ease-out将名称右移8 px，并将名称与最右箭头变橙；离开后同样0.25 s还原。 - 照片为该行对应图片，132×84、圆角半径6、带投影，出现在光标右侧26 px、略高于光标的位置，垂直方向保持在窗口内。 - 同样0.25 s内照片不透明度0→1、缩放0.85×→1×。无延迟跟随光标；进入下一行时，旧照片淡出、新照片淡入。 何时使用：用于作品、项目或房产列表，保留轻量纯文字布局，同时让用户查看感兴趣条目的照片。 参考实现（Canvas 2D，画面仅由时间决定的函数）：https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/157.txt 共享辅助代码：https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js 请保持参考实现的形状、时间安排和缓动数值不变，只调整文字、颜色和素材，以适配我正在制作的项目。
使用示例
示例输入
请实现“悬停图片预览 · Hover image reveal”：悬停列表项时显示对应照片
示意结果
下方是来源作者提供的静态画面和可播放动效参考，并非本站对该提示词调用模型生成的结果。
提示词仅供参考，请结合实际场景调整，并核实 AI 生成结果。