本页出处
设计风格资料库
内容来自 luckymaomi 的 UI 风格库(复刻版),以 MIT 许可 提供。本站镜像收录,仅作学习参考;这一页的原始地址是 原站页面。
← 回到导览访问原站仓库
返回配方目录
Cinematic Video Hero

电影视频首屏组件配方

inline-flex items-center gap-2 rounded-full transition-all duration-300 ease-out active:scale-[0.98] bg-[#E4C063] text-[#05060A] font-semibold hover:bg-[#efce78]
button

按钮

Warm-gold cinematic CTA and frosted secondary

基础骨架
inline-flex items-center gap-2 rounded-full transition-all duration-300 ease-out active:scale-[0.98]
变体
金色、毛玻璃、幽灵
状态
hover
card

卡片

Poster-backed scene card with a gradient scrim caption

基础骨架
relative overflow-hidden rounded-xl bg-[#141821]
变体
场景、带框
状态
hover
input

输入框

Frosted field legible over footage

基础骨架
bg-white/10 backdrop-blur-md border border-white/25 rounded-full px-5 py-3 text-white placeholder-white/50 focus:outline-none focus:border-[#E4C063]/70 focus:bg-white/15 transition-all duration-300
变体
毛玻璃、实底
状态
focus