粘性标题
CSS实现仿手机通讯录的首字母固定滑动列表使用纯CSS实现了一个可以吸附首字母并且支持上下滑动的有序列表，跟智能手机的通讯录效果一样，上下滑动内容时，左上角会固定显示视口内容所对应的首字母。该效果是基于CSS的position: sti...
充电电池
CSS创意电池充电中效果，高颜值的电量加载过程动画当前代码段基于CSS创建了一个电池充电动画效果，中间由「电池+闪电」图标组成一个正处在充电状态的动画，周边是一个圆形的加载环，图标均是由SVG实现的，闪电以及加载动画是基于CSS实现的。并且实现...
创意字符
CSS多层光环嵌套3D立体复古文字效果，点按文字实现多层光环扩散效果当前代码段基于CSS创建了一个复古风格的多层光环嵌套的3D文字效果，支持点按键盘任意键更换文字，当鼠标悬停在字母上时，字母会跟随光标移动，点击并按住字母时，文字会激活一个多彩的光环扩散效果。这种...
迸裂
CSS钻石旋转飞向四方动画效果基于CSS实现的钻石旋转四方扩散效果，HTML中预先定义三个figure区域对应着三层钻石结构，最内层定义多个div代表多个钻石。然后通过CSS的display: grid;以及grid-te...
滚动指示
CSS创意闹钟效果鼠标滚动指示器小组件该代码片段创建了一个由鼠标滚动驱动的小闹钟动画计时器，其中小闹钟图标是通过SVG矢量图创建的，底层完全使用CSS实现滚动计数和指针滑动效果。小闹钟下方的进度百分比会根据滚动位置更新，闹钟的指针以...
抽奖轮盘
CSS转动轮盘抽奖动画效果基于纯CSS实现的轮盘转动抽奖动画效果，这个动画效果无需各类三方插件完全基于CSS设置::before、::after伪元素以及animation等关键属性实现。用户可通过点击或者拖动的方式启动...
便当布局
CSS在HTML中实现响应式便当风格布局（Bento Grid）最近类似于苹果公司 WWDC 大会中 Apple Events 设计的摘要幻灯片的「便当（Bento Grid）风格布局」特别的流行，今天小编为大家实现了一个基础的结构化的便当风格示例，底层使用...
右键菜单
纯 CSS 实现仿电脑右键多级菜单，支持按照菜单类型分组！基于纯 CSS 创建一个带有锚点定位并且支持多层级的弹出菜单（Popover），使用CSS和Popover API实现精确的定位和样式，此外还支持按菜单类型进行分组。这种效果常用于提供额外信息、...
花式洗牌
GSAP花式洗扑克牌卡片动画效果使用GSAP实现的炫酷洗牌动画效果，卡片是由SVG生成的，卡片的基本布局是通过CSS实现的，事先在HTML页面中定义一个ui列表，其中每一个卡片对应一个li元素，然后通过GSAP的timelin...
水平滚动
CSS实现的水平滚动轮播容器，带可隐藏的滚动进度条使用纯CSS技术创建一个水平滚动的容器，其中包含多个内容项以及下方可隐藏的进度指示条，同时，启用滚动锁定功能（scroll snapping），使每个内容项在滚动停止时能够平滑整齐地对齐到视口中...
无限滚动
GSAP Observer 垂直无限滚动效果，支持页面拖拽使用GSAP的Observer插件实现垂直方向无限滚动效果，并且支持上下拖拽内容。当用户滚动或者拖拽页面时，内容会不断更新，形成无限滚动的效果。这种效果常用于社交媒体、新闻网站等需要持续加载内容...
波纹动画
CSS实现的水波纹边框效果按钮该代码文件创建了一种具有水波纹边框效果的按钮。使用CSS的伪元素::before创建波纹效果，并应用不同的动画延迟创建不同效果的波纹按钮效果。这种效果可以增强按钮的交互性和视觉吸引力。