便当布局
HTML + CSS实现响应式便当风格后端仪表板页面基于CSS创建了一个响应式的便当风格仪表板HTML页面，使用CSS 的Grid和Flexbox实现灵活且美观的布局，并且支持在任何大中小尺寸设备中浏览。这种布局常用于展示多种不同类型的信息，如...
卡通星星
SVG 可爱的彩色卡通星星⭐️背景，每次刷新都会变换星星布局！基于SVG矢量图实现的无数彩色卡通星星组成背景效果，特别的卡哇伊，部分星星之间由细线连接在一起。每次刷新都会在随机的位置生成大小不一、黄色和白色小星星。由于完全基于SVG矢量图实现所以特别的轻量级！
便当布局
CSS在HTML中实现响应式便当风格布局（Bento Grid）最近类似于苹果公司 WWDC 大会中 Apple Events 设计的摘要幻灯片的「便当（Bento Grid）风格布局」特别的流行，今天小编为大家实现了一个基础的结构化的便当风格示例，底层使用...
网格图库
基于CSS Grid实现的响应式图文网格布局，支持RTL反向功能在HTML中创建了一个响应式的网格布局图库，单张图片的左上角、左下方以及中间区域可放置文字介绍内容，右下角设置了「分享」以及「收藏」的功能按钮。并且提供了RTL反向布局功能。这款使用CSS Gr...
食谱布局
HTML最佳菜谱图文布局，支持响应式这是一种利用CSS实现的最佳食谱图文网页布局方式，网页的背景是一张白纸放在拥有纹理的餐桌上，最终的图文内容会放入这张白纸中，此背景还原真实做饭场景，能够把做菜所需的食材、烹饪步骤以及操作时间等...
介绍卡片
HTML创意个人简介卡片布局，附带交互性极强的折叠与打开详情功能通过JS结合CSS实现的个人信息展示卡片布局效果，初始状态下是一张手绘简图（可以根据性别放置不同的图片），简图的眼神会随着鼠标的方向进行移动。当点击简图后会呈现「折叠纸甩开摇摆」的动画效果，在简...
夜空背景
CSS繁星点点夜空背景效果，美丽的夜空星星随机闪动创建一个“Starry Night「繁星夜空」”的背景效果，使用Sass的random()函数来生成随机的星星位置和大小，可以实现一个动态且自然的夜空效果。
交替布局
CSS实现图片与内容位置交替的响应式布局以及反向布局利用CSS的布局属性创建了一个交替布局的页面，其中每个文章区块内的图像和内容会根据区块的方向属性交替排列，同时确保在响应式布局中内容始终位于图像之上。并且支持反向布局选项。这种布局底层使用CSS...
海滩明月
CSS动画模拟夜晚一轮明月高高挂起的海滩景观动画效果基于CSS实现的海滩波浪与月明星稀的静谧背景动画效果，一轮明月周围点点繁星高挂，下方是波动的海浪，这个简单的CSS景观设计展示了如何使用CSS来创建一个美丽而宁静的夜间海滩场景。你可以根据自己的...
创意背景
CSS 创意动态渐变背景，linear-gradient实现的线型交叉图形变换效果基于 CSS 的 linear-gradient、keyframes 以及animation等关键属性实现的线性渐变动画效果，非常的吸引人！linear-gradient 是一种背景图像，它沿着...
电商布局
CSS的Flexbox实现的商品页面网格响应式布局，附带购物车增删商品交互效果使用 Flexbox 创建的产品页面可以实现一个简洁且响应式的网格布局。Flexbox 是 CSS3 中的一个布局模式，它能够使网页元素在不同的屏幕尺寸下保持良好的布局效果。它可以自动调整大小以...
背景移动
CSS动态移动背景（平铺多个小图案朝一个方向缓慢移动）通过CSS实现的移动动态背景动画效果。呈现的效果：多种小图标平铺页面并且持续缓慢向右上角移动。实现方式：通过设置html页面的body元素的transform、background-*、ani...