Motion.Lab
Templates · 整页模板

动效组合完整页面参考

5 套由 138 个动效组合而成的整页模板,覆盖营销、产品、认证、电商、创意五大场景。
点击进入全屏预览,也可作为新项目的起点。

营销Landing Page

产品落地页

首屏渐变 + 滚动揭示 + 客户 logo 跑马灯 + 数据 stats + CTA 区域,营销页通用骨架。

split-charscroll-revealmarqueecount-upgradient-text+2
产品Dashboard

数据仪表盘

侧栏 + 顶部 KPI 卡片 + 实时折线/柱状/环形图 + 3D 倾斜交互,数据可视化展示。

three-d-tiltcount-uphover-glowcolor-cycleprogress-bar+1
认证Login

登录注册

居中卡片 + 粒子背景 + 输入框聚焦光晕 + 按钮涟漪 + 切换 tab 翻转,最常见的认证页。

three-particlesfocus-glowripple-clicktoggle-flipshake+1
电商Pricing

价格方案

三档套餐对比 + hover 抬升 + 渐变描边 + 月/年切换 + 常见问题折叠,订阅产品标配。

hover-liftborder-drawtoggle-flipaccordion-smoothcount-up+1
创意Portfolio

作品集

磁吸网格 + 遮罩揭示 + 鼠标跟随聚光 + 文字变形 + 入场动画,个人/工作室展示页。

grid-magneticmask-revealhover-follow-cursortext-split-revealthree-d-tilt+1
新粗野Neo-Brutalism

新粗野主义

硬边粗框、明黄对比、夸张投影、原始网格。宣言感、搞怪、让人一眼记住。

text-marqueehover-presshover-tiltcolor-cyclemagnetic-button+1
拟物Neumorphism

拟物软 UI

同色系背景 + 内外阴影 + 按压感按钮 + 软圆角,触感优先、温和、治愈。

hover-presstoggle-flipprogress-ringcount-upwave-bar+1
赛博Cyberpunk

赛博朋克

深色 + 霓虹青/紫/粉 + 扫描线 + 故障风文字 + 数据流。黑客感、夜店、反抗。

glitch-textmarqueescan-linesgradient-textpulse-glow+1
Y2KY2K Retro

Y2K 复古

黑黄棋盘格、镭射渐变、DotWeb、星球、Disco 球。千禧年、华丽、Disco 复古。

text-marqueechrome-texthover-presscolor-cyclemagnetic-button+1
终端Terminal CLI

终端命令行

绿底 + 黑白字 + ASCII 艺术 + 命令提示符 + 闪烁光标。极客感、代码即美学。

typewriterblink-cursorascii-arttext-marqueecount-up+1
空间Spatial / Vision Pro

空间计算

玻璃拟态 + 巨大字号 + 模糊光圈 + 高级质感。Apple 范儿、spatial、premium。

glass-blurgradient-textmagnetic-buttonscroll-parallaxhover-glow+1
瑞士Swiss Minimalism

瑞士国际主义

黑红配色、十二网格、Helvetica 风、几何元素、严格排版。克制、理性、高级。

scroll-revealnumber-countertext-marqueehover-tiltmagnetic-button+1
孟菲斯Memphis Design

孟菲斯设计

80s 几何 + 点阵网格 + 卷曲线 + 三角圆点 + 撞色配色。欢快、活泼、年轻。

hover-tilttext-marqueecolor-cyclemagnetic-buttonhover-press+1
科技Tech HUD

科技风

深色 + 等宽数字 + 数据流 + 电路网格 + 玻璃面板。未来感、数据可视化、HUD 范儿。

text-marqueegradient-textpulse-glowhover-glowcolor-cycle+1
极简Minimal

极简风

大量留白 + 黑白灰 + 细线条 + 极简排版。安静、克制、呼吸感(与 Swiss 区分:更轻、更禅)。

scroll-revealfade-incount-uphover-lifttext-marquee+1
包豪斯Bauhaus

包豪斯

红黄蓝三原色 + 几何形状 + 纯色块 + 先锋派。功能即美学、构成感。

hover-tiltcolor-cyclemagnetic-buttontext-marqueescroll-reveal+1
蒸汽Steampunk

蒸汽朋克

铜色 + 齿轮 + 黄铜铆钉 + 维多利亚 + 复古机械。工业感、探险、蒸汽动力。

hover-tiltpulse-glowtext-marqueecolor-cyclemagnetic-button+1
马卡龙Macaron Dream

马卡龙梦境

粉嫩色系 + 渐变 + 棉花糖 + 云朵 + 梦幻。少女心、甜、柔软。

hover-presspulse-glowcolor-cyclegradient-textmagnetic-button+1
高级展示Premium Showcase

高级展示

对标 motionsites.ai:深色 + 鼠标 spotlight + 渐变文字 + 3D 卡片 + masonry 网格 + 漂浮装饰。

mouse-spotlightgradient-text3d-cardscroll-revealparallax+1
氛围Misty Forest

雾气山林

Ken Burns 慢呼吸背景 + Canvas 雾气粒子 + 玻璃预订卡 + 暖色小屋光晕。度假酒店/民宿范儿。

ken-burnscanvas-particlesglass-blurglow-flickerstagger-in+1
油画Paris Café

巴黎咖啡

印象派油画背景 + Ken Burns 慢呼吸 + Canvas 雨滴 + 暖色路灯光晕。巴黎小酒馆范儿。

ken-burnscanvas-rainoil-paint-csslamp-flickerglass-blur+1
电影Velorah Cinematic

电影感视频

全屏循环视频背景 + Liquid Glass 玻璃 UI + Instrument Serif 电影字 + fade-rise 入场。对标高端品牌落地页。

video-loopliquid-glassfade-risehover-scalegoogle-fonts
奇幻Faeloria Fantasy

奇幻秘境

奇幻动漫视频背景 + 飘动 Canvas 气泡 + 玻璃卡片 + DM Serif 童话字 + 渐变 hueShift。童书/冥想/梦境范儿。

video-loopcanvas-bubblesliquid-glassfade-risehue-shift+1
点击任意卡片 → 进入全屏预览;右上角有"在新窗口打开"按钮