交叉布局
用CSS变量和Flexbox实现响应式错落有致的布局，用于流程文本信息这是一款响应式文字信息布局，每块信息区域都是由平行四边形边框组成的，信息块之间交叉错落放置，非常有艺术感。基于CSS变量和Flexbox布局技术实现。它利用CSS变量来简化样式管理，并通过Fle...
拖拽边框
HTML中JS实现可拖拽的边框，验证CSS渐变边框与圆角的良好结合这是一款展示CSS渐变边框与圆角（border-radius）配合效果的互动演示，基于CSS技术实现。它证明了使用覆盖方法创建的渐变边框能够很好地适应圆角，而不会像使用border-image那...
文件管理App
HTML中基于CSS实现的可便捷切换深浅模式的文件管理器App首页布局模板这是一款文件管理器手机应用App首页布局模板，基于CSS + 少量 JavaScript 技术实现，提供用户友好的深色/浅色模式即时切换功能，确保在不同光照环境下都有舒适的视觉体验，同时保持界面...
卡内流光
HTML中通过CSS实现的极简风格卡片边框内部流光效果这是一款极简风格的内发光卡片动画效果，仅用几十行CSS代码即可实现，非常的简洁。卡片的边框内部弥漫着流动的彩色光晕展示出柔和的内发光效果，使得用户交互体验更加生动和吸引人。
水滴加载器
纯CSS实现的创意水滴掉落再接住加载器Loading动画效果基于纯CSS实现的一款极简风格水滴掉落效果的预加载器。可以很好的兼容市面上的常见浏览器，实现非常简单，仅用CSS不超过100行代码即可实现。可用在网页或者应用加载期间。
图片悬浮
HTML中基于CSS实现的一款鼠标悬浮图片边框旋转效果一款通过CSS实现的图片悬浮效果，多张图片有序的分布在一棵树形结构上，每个枝杈都有一张图片，每张图片都设置了优美的五边形边框效果，鼠标悬停于图片之上，边框会逆向或者顺向旋转一定的角度，当鼠标离...
多步骤信息
HTML中基于CSS实现的响应式多步骤信息介绍布局模板这是一款响应式多步骤流程信息介绍布局模板，当HTML网页中介绍的产品或者功能需要多个步骤信息展示才能实现或达到目标，用这款模板就对了。它基于CSS变量和网格布局（CSS Grid Layout）...
心形齿轮
HTML中仅使用CSS与SVG实现的心形内部机械齿轮运转动画效果这是一款机械齿轮心形效果，基于CSS+SVG技术实现，在一个心形图案的内部有多个彩色齿轮互相咬合着运转，展现出一种独特的机械美感。
加载器集合
HTML中基于CSS实现的72种简洁旋转风格加载中Loading动画效果这是一组纯CSS实现的加载动画，总共包含72种样式，每种效果仅需要一个HTML元素即可实现，相当的简洁。这些加载效果需要Houdini支持才能正常工作。由于Houdini目前仅在Chromium...
信息卡片
HTML中使用CSS实现响应式多选项信息卡片图表布局这是一款响应式信息图表，基于 CSS 变量和网格布局技术实现，展示了一系列美味甜点的选项。每个选项都以彩色标签的形式呈现，标签上标注了甜点名称和简短描述，整体设计简洁且视觉效果突出。
粒子散列
HTML中基于纯CSS实现的疯狂点击爆炸粒子飞散效果这是一个使用纯CSS实现的粒子爆炸效果。该动画仅使用一个关键帧keyframe即可实现，非常的轻量级。可应用于鼠标点击效果或者网页背景。