便当布局
HTML + CSS实现响应式便当风格后端仪表板页面基于CSS创建了一个响应式的便当风格仪表板HTML页面，使用CSS 的Grid和Flexbox实现灵活且美观的布局，并且支持在各类大中小尺寸设备中浏览。这种布局常用于展示多种不同类型的信息，如...
维奥蒂
建筑与施工 Bootstrap 模板：为现代建筑与房产开发量身打造的响应式网站设计「维奥蒂」是一款专为现代建筑公司和房产开发企业打造的高性能响应式 HTML 模板，基于主流的 Bootstrap 框架开发，提供了总共35+HTML内页，其中涵盖4种独特风格的主页布局主题，关键...
粘性标题
CSS实现仿手机通讯录的首字母固定滑动列表使用纯CSS实现了一个可以吸附首字母并且支持上下滑动的有序列表，跟智能手机的通讯录效果一样，上下滑动内容时，左上角会固定显示视口内容所对应的首字母。该效果是基于CSS的position: sti...
充电电池
CSS创意电池充电中效果，高颜值的电量加载过程动画当前代码段基于CSS创建了一个电池充电动画效果，中间由「电池+闪电」图标组成一个正处在充电状态的动画，周边是一个圆形的加载环，图标均是由SVG实现的，闪电以及加载动画是基于CSS实现的。并且实现...
创意字符
CSS多层光环嵌套3D立体复古文字效果，点按文字实现多层光环扩散效果当前代码段基于CSS创建了一个复古风格的多层光环嵌套的3D文字效果，支持点按键盘任意键更换文字，当鼠标悬停在字母上时，字母会跟随光标移动，点击并按住字母时，文字会激活一个多彩的光环扩散效果。这种...
阿斯科
多功能物流与货运行业现代化响应式 Bootstrap 网站模板「阿斯科」是一款完全响应式的优异颜值现代化 HTML 模板，专为物流、快递、货运、航运、海运、空运、船运、运输、仓储等行业网站打造的标准模板。模板总共包含18+HTML内页，包含2款独特的主页...
迸裂
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...