感应小游戏
HTML四色板点按顺序与音调记忆小游戏，考验你的记忆力以及音调感知能力一款通过CSS以及JavaScript实现的非常好玩的感应小游戏，通过记忆声音播放顺序或者四色版点按顺序加上自己对音乐的感知能力挑战游戏关卡。通过点击「开始」按钮开始游戏，仔细倾听播放的音调以...
区域裁剪
使用CSS clip-path 实现滚动渐显的英雄区块，增强网站滚动体验！使用CSS的clip-path属性创建出的一种动态效果，使得页面上的元素（例如首页英雄区域）在页面滚动时逐渐显示出来。页面最开始的时候，英雄区域被一个形状（通常是矩形）完全覆盖，用户看不到其内容...
固定效果
GSAP实现滚动页面固定特定区域效果这是一种使用 GSAP 的 ScrollTrigger 插件实现的一种叫做“固定区域（Pinned Section）”的滚动动画效果，这种效果表现为当用户滚动页面到某个特定区域时，示例中的特定...
滚动视差
CSS实现的一种视觉吸引力超强的滚动视差效果使用 position: sticky 和 scale 变换来创建一个带有视差效果的CSS粘性（sticky）区域，当用户滚动页面时，下层图片会以较慢的速度进行滚动，而上层的内容部分会以相对较快...
评分展示
HTML评分结果展示布局案例实现了一个评分结果展示区域布局HTML页面，整个布局包含了每个分段的评论人数、总评论人数以及平均分数三部分，其中单个分段人数是通过纵向柱状图实现的。其中布局是通过CSS实现的，单个分段评论百分比...
3D标题
纯CSS实现的创意中间镂空 3D 标题文字纯CSS实现的3D文本效果，当鼠标悬停文本时镂空区域颜色会更换，实现这种创意性十足的文本效果无需JavaScript！更无需重复文字！仅仅需要SVG矢量图搭配CSS即可实现，非常的轻量级，使用...
菜谱布局
CSS 极具创意的菜谱介绍网页布局使用纯CSS实现的烹饪过程菜谱介绍网页布局效果，该布局划分为两大区域，分别是食材图文介绍区以及烹饪过程视频区，两大区域可通过按钮平滑切换，其中的食材区可放置菜品成品图片以及所需要的食材和烹饪时间...
海底探险号
Bootstrap 滚动鼠标探索海底深渊世界一款非常有趣的海底探险动画效果，底层基于Bootstrap主流版本实现，整个页面从上往下由浅及深分为阳光区、曙光区、午夜区、深渊区、海底区，背景是逼真的「马里亚纳海沟」素材图以及不同深度所拥有...
loading动画
CSS 跳跃加载 loading 动画效果超有创意的一款跳跃 loading 加载效果，使用 CSS 的 animation 以及 background 等关键属性实现的动画效果，对响应式支持的十分好，随着设备的尺寸逐渐减小动画效果会有...
黑洞
Canvas 逼真黑洞动画效果基于 Canvas 实现的黑洞动画，实现原理是先定义canvas区域，而后初始化一张星空背景图置于canvas画布之上，最后通过 jQuery 控制黑洞效果，这款黑洞效果特别的逼真，黑洞会随着鼠...
世界地图
Three.js 3D地球仪上的交互式 SVG 世界地图这是一种旋转的 3D 地球仪动画效果，能够全视角查看世界地图，并且支持拖拽和悬浮功能，当鼠标悬浮与地图之上时会显示该区域国家的名称，其中的 3D 效果是基于 Three.js 实现的，拖拽以及...
创意首屏设计
CSS 创意日全食聚光灯下的英雄区块首屏设计使用 CSS 实现的创意英雄区块展示效果，由多种震撼效果组合而成，右上方是一个带边框色彩流动效果的「联系按钮」，中间放置一个日全食效果下散发着微弱光的月亮图标，当点击月亮图标时会发出金黄色的光投...