便当布局
CSS在HTML中实现响应式便当风格布局（Bento Grid）最近类似于苹果公司 WWDC 大会中 Apple Events 设计的摘要幻灯片的「便当（Bento Grid）风格布局」特别的流行，今天小编为大家实现了一个基础的结构化的便当风格示例，底层使用...
水平滚动
CSS实现的水平滚动轮播容器，带可隐藏的滚动进度条使用纯CSS技术创建一个水平滚动的容器，其中包含多个内容项以及下方可隐藏的进度指示条，同时，启用滚动锁定功能（scroll snapping），使每个内容项在滚动停止时能够平滑整齐地对齐到视口中...
无限滚动
GSAP Observer 垂直无限滚动效果，支持页面拖拽使用GSAP的Observer插件实现垂直方向无限滚动效果，并且支持上下拖拽内容。当用户滚动或者拖拽页面时，内容会不断更新，形成无限滚动的效果。这种效果常用于社交媒体、新闻网站等需要持续加载内容...
网格图库
基于CSS Grid实现的响应式图文网格布局，支持RTL反向功能在HTML中创建了一个响应式的网格布局图库，单张图片的左上角、左下方以及中间区域可放置文字介绍内容，右下角设置了「分享」以及「收藏」的功能按钮。并且提供了RTL反向布局功能。这款使用CSS Gr...
食谱布局
HTML出色菜谱图文布局，支持响应式这是一种利用CSS实现的出色食谱图文网页布局方式，网页的背景是一张白纸放在拥有纹理的餐桌上，最终的图文内容会放入这张白纸中，此背景还原真实做饭场景，能够把做菜所需的食材、烹饪步骤以及操作时间等...
滚动动画
CSS鼠标滚动驱动图片动态变化动画效果创建一个基于鼠标滚动的 CSS 动画效果，可以让HTML页面的照片在用户滚动到视口时呈现图片交叉替换以及模糊变清的动画变化效果。这种效果可以增强用户体验，使页面更加生动有趣。同时这也是一款相当成...
弗瑞拉
专为园艺与景观设计打造的专业 HTML 响应式模板「弗瑞拉」是专为园艺和景观设计专业人士和公司精心打造的 HTML 模板，该模板基于主流的响应式框架Bootstrap先进版本进行构建，非常适合景观设计、花园、公园、草坪养护、水景、园林设计及维护...
马克特
电子产品和生鲜超市电商平台Bootstrap网站模板「马克特」是一款功能全面且布局合理的电商平台专属Bootstrap响应式网站模板，提供了2种不同行业电商主题布局风格，分别是水果蔬菜饮料等生鲜超市主题以及手机、电脑、相机等电子产品主题风格。非常...
跑马灯
CSS创意图片文字跑马灯效果，实现倾斜方向滚动轮播创建一个展示狗狗图片以及介绍的跑马灯效果。使用CSS的@keyframes规则和animation属性，可以轻松实现图片的水平或者倾斜方向滚动效果。DIV容器元素用于包裹常见的图片，并控制其显...
介绍卡片
HTML创意个人简介卡片布局，附带交互性极强的折叠与打开详情功能通过JS结合CSS实现的个人信息展示卡片布局效果，初始状态下是一张手绘简图（可以根据性别放置不同的图片），简图的眼神会随着鼠标的方向进行移动。当点击简图后会呈现「折叠纸甩开摇摆」的动画效果，在简...
交替布局
CSS实现图片与内容位置交替的响应式布局以及反向布局利用CSS的布局属性创建了一个交替布局的页面，其中每个文章区块内的图像和内容会根据区块的方向属性交替排列，同时确保在响应式布局中内容始终位于图像之上。并且支持反向布局选项。这种布局底层使用CSS...
卡片布局
CSS电影介绍响应式卡片布局，适合影视音乐等娱乐网站良好展示作品使用CSS实现的响应式电影详情介绍卡片布局，非常适合影视网站介绍影片、音乐网站介绍专辑以及电商网站介绍产品场景使用。图片的布局、文字的展示都相当的到位，能够突出重点内容让用户对影视作品一目了然。...