蜂巢布局
基于 HTML 与 CSS Grid 构建的响应式蜂巢网格布局相册效果这是一款蜂巢网格布局的图库效果，图片填充于蜂巢布局的每一个孔中，当鼠标悬停于图片之上时，图片会呈现放大突出效果。此蜂巢布局基于CSS Grid技术实现，摒弃了传统的绝对定位方式，采用响应式设计，...
春分
「惊蛰」模板2.0，Bootstrap5.3简约布局SpringBoot自助建站博客模板「春分」模板是「惊蛰」模板的另一种风格表现形式，对首页的整体的模块划分与布局做了大规模的调整，这款模板相对于「惊蛰」模板更加的简约，并且也适当的增减了一些板块，下面会做详细介绍。技术实现跟惊蛰博...
倾斜卡片
CSS Grid布局驱动的等轴测卡片滚动效果，常见卡片斜着平铺于页面中这是一款等轴测卡片网格滚动效果，常见的卡片信息倾斜平铺于页面之中，当鼠标悬浮于卡片之上时，卡片会呈现出脱离页面并多层次展示效果。基于CSS Grid + CSS变量技术实现，通过简洁的JavaS...
CSS答题卡
利用 CSS 网格布局实现的中学考试答题卡效果这是一款使用CSS Grid布局技术实现的扫描答题卡（Scantron answer sheet）效果。通过CSS Grid的强大布局能力，精确地重现了中学时期用于期中和期末考试的标准化答题卡样...
图片无限加载
基于Intersection Observer实现的无限滚动加载卡片图片动画这是一款无限滚动图片卡片展示效果，基于CSS和JavaScript技术实现，特别是利用了Intersection Observer API来优化性能。页面上展示了一个网格布局，其中每个单元格都是...
苹果键盘
CSS网格布局实现的苹果键盘逼真效果，带点击键盘交互效果这是一款通过纯CSS实现的交互式苹果键盘，键盘按键以及键盘整体都有影子效果，呈现一种立体感，活灵活现的键盘效果简直跟真的Apple键盘一模一样。并且键盘按键在点击时还带有被按下的交互感。
内容单选
HTML支付确认（结算）页面网格布局，并实现银行卡及套餐等内容卡片单选效果通过CSS实现的支付结算页面基础网状布局，实现了选择银行卡以及选择套餐的功能。支持响应式布局，在移动等小型设备中同样可以良好显示。这款效果除了实现了结算页面的布局之外，最重要的是内容卡片单选效果...
思立微
CRM、电商后台和数据分析后台专用管理面板 Bootstrap 网站模板「思立微」模板 是一款功能齐全、设计现代的 Admin Dashboard 高级后端管理响应式网站模板，专为简化Web应用后台数据管理并且希望构建高效、灵活、功能强大的管理面板的开发者而设计，采...
便当布局
HTML + CSS实现响应式便当风格后端仪表板页面基于CSS创建了一个响应式的便当风格仪表板HTML页面，使用CSS 的Grid和Flexbox实现灵活且美观的布局，并且支持在各类大中小尺寸设备中浏览。这种布局常用于展示多种不同类型的信息，如...
便当布局
CSS在HTML中实现响应式便当风格布局（Bento Grid）最近类似于苹果公司 WWDC 大会中 Apple Events 设计的摘要幻灯片的「便当（Bento Grid）风格布局」特别的流行，今天小编为大家实现了一个基础的结构化的便当风格示例，底层使用...
网格图库
基于CSS Grid实现的响应式图文网格布局，支持RTL反向功能在HTML中创建了一个响应式的网格布局图库，单张图片的左上角、左下方以及中间区域可放置文字介绍内容，右下角设置了「分享」以及「收藏」的功能按钮。并且提供了RTL反向布局功能。这款使用CSS Gr...
电商布局
CSS的Flexbox实现的商品页面网格响应式布局，附带购物车增删商品交互效果使用 Flexbox 创建的产品页面可以实现一个简洁且响应式的网格布局。Flexbox 是 CSS3 中的一个布局模式，它能够使网页元素在不同的屏幕尺寸下保持良好的布局效果。它可以自动调整大小以...