迸裂
CSS钻石旋转飞向四方动画效果基于CSS实现的钻石旋转四方扩散效果，HTML中预先定义三个figure区域对应着三层钻石结构，最内层定义多个div代表多个钻石。然后通过CSS的display: grid;以及grid-te...
抽奖轮盘
CSS转动轮盘抽奖动画效果基于纯CSS实现的轮盘转动抽奖动画效果，这个动画效果无需各类三方插件完全基于CSS设置::before、::after伪元素以及animation等关键属性实现。用户可通过点击或者拖动的方式启动...
网格图库
基于CSS Grid实现的响应式图文网格布局，支持RTL反向功能在HTML中创建了一个响应式的网格布局图库，单张图片的左上角、左下方以及中间区域可放置文字介绍内容，右下角设置了「分享」以及「收藏」的功能按钮。并且提供了RTL反向布局功能。这款使用CSS Gr...
创意单选框
CSS通过老人半身像的显示与隐藏状态实现CheckBox复选框效果基于CSS实现的老人半身像效果，初始状态是半隐身状态（表示未选中状态），当点击时半身像突出显示并且呈现点头微笑的动画效果（表示选中状态），通过动画的两种效果实现CheckBox复选框的选中以及未...
UFO
CSS实现UFO灯光照亮地面效果使用CSS实现的UFO模型效果，在html中预先定义UFO的头部：head，主体：body，灯光：beam等五个区域，然后通过CSS的定位position、背景background以及z-ind...
太阳光芒
CSS太阳发光动画效果基于CSS实现的太阳以及太阳光芒四射动画效果，整个太阳呈现出一种炙热的沸腾感，实现方式：先定义若干个div为ray的元素，代表阳光，外层是div为sun的「太阳」区域，然后通过CSS的anima...
感应小游戏
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即可实现，非常的轻量级，使用...