AI UP LAB HTML 收集 · 每日更新HTML Collection · daily updates

HTML 收集HTML Collection / Animate.css Animate.css

精选 Featured 动效 Motion

Animate.css Animate.css

即加即用的跨浏览器 CSS 动画库官网：可预览 bounce、fade、flip 等类，并查看安装与无障碍说明。 Drop-in cross-browser CSS animation library site: preview bounce, fade, flip, and more, plus install and accessibility notes.

打开原文Open source 按类型By type

适合学什么What to learn

  • 动效 Motion

    CSS 动画库、纯 CSS 绘画与动效演示。 CSS animation libraries, pure-CSS drawings, and motion demos.

收录理由Why we listed it 动效类参考站，示范如何用纯 CSS class 展示动画。 A motion reference site that shows how to demo animations with plain CSS classes.

Animate.css 预览

同类型Same type

+ 精选 + Featured 动效 Motion 作品集 Portfolio

A Single Div A Single Div

Lynn Fisher 的 CSS 绘画项目：每幅画只用一个 HTML div。既是作品集，也是纯 CSS 图形实验。 Lynn Fisher’s CSS drawing project: each picture uses one HTML div. Both a portfolio and a pure-CSS graphics experiment.

css-art · single-div
+ 精选 + Featured 动效 Motion 游戏/互动 Game / interactive

Scroll-driven Animations Scroll-driven Animations

Chrome 开发者布拉姆斯做的演示站：阅读进度、封面流转、堆叠卡片、横向卷轴等，全部用滚动驱动动画，演示页本身就是手写 HTML/CSS/JS，无构建步骤。 Bramus’s Chrome-developer demo site: reading progress, cover-flow, stacked cards, horizontal scroll, all scroll-driven. The demo itself is handwritten HTML/CSS/JS with no build step.

scroll · css
动效 Motion 组件 Component

css-doodle css-doodle

基于 Web Components 的 CSS 图案生成器：用扩展 CSS 语法画网格、图形与动画，文档站本身就是可点击的现场演示。 Web Components CSS pattern generator: draw grids, shapes, and motion with an extended CSS syntax. The docs site is a clickable live demo.

web-components · css