SuperAPI AI 工具集

hyperframes-card-news-work-photo-cover

设计与创作

查看项目

更新于 10-16 05:02

技能介绍

用途:photo-cover 是卡片新闻中的照片型开场/收尾卡,在整幅照片上叠加品牌标签与两行大标题。若用于 AI 新闻的新封面或主图,需先应用 hyperframes-card-news-fomo-image-direction 确定事实核查、主角、视觉隐喻与 A/B/C 方案,再用本技能实现。

主要能力与结构:允许的类为 <div id="c-N" class="card clip photo-cover" data-start="..." data-duration="5" data-track-index="0">。内部包含 .bg-image(img 使用 assets/ 相对路径)、.hook-handle(品牌/来源,必须置于黑色框上)、.hook-title(两行 .line 标题)、.page-indicator;.inset-avatar 仅在确需辅助人物或产品图时使用。

图片选择规则:一张图只放一个主角、一个文章专属物件、一个视觉隐喻;把 1 秒内可识别的面部、产品或官方 UI 放大置于上方 65-70%;用支付闸机/自动售货机表达价格与限制、赛道/领奖台表达性能、裂缝/开锁表达安全;拒绝可复用于其他 AI 文章的通用图(暗房+笔记本+全息+普通机器人);优先官方产品图、截图与授权实拍,不信任生成图中的文字、数字、标志与 UI;标志、价格、日期、产品名用 HTML/CSS 精确合成;不得把真实人物或事件做成假现场照片,不可避免的生成/摆拍图需在卡片或说明中标注。

CSS 要点:.card.photo-cover 设 padding:0、overflow:hidden;.bg-image 绝对定位 inset:0、z-index:0,img 宽高 100%、object-fit:cover;.hook-handle 绝对定位(left:72px、bottom:386px、z-index:3、inline-flex、max-width:760px、padding:12px 18px 13px、border-radius:8px、background:rgba(0,0,0,0.82)、白色文字);.hook-title 绝对定位底部,padding:260px 72px 142px,使用由 rgba(0,0,0,0.96) 到透明的向上渐变,使下方 35% 接近纯黑以保证可读性;.line 字号 64-76px、字重 800-900、白色、行高 1.15-1.28。

动画:使用 GSAP,依次对背景图做 scale 1.08 的 1.2 秒缓入、对 .hook-handle 做 y:20 淡入、对 .hook-title .line 做 y:40 淡入并 stagger 0.12、对 .page-indicator 淡入。

检查与限制:在 overview 中以 data-skill="photo-cover" 记录;AI 新闻封面需同时应用 fomo-image-direction;遮住文字后仍能读出主题或事件方向;保持一主角、一专属物件、一隐喻;不使用通用 AI 工作间/机器人/全息图;品牌标签须在黑色框上;底部文案区足够暗;图片用 assets/ 相对路径;确认生成/摆拍图的防误解标注;不要当作普通文字说明卡使用。