多边形形状
CSS实现的多款多边形图形，多边形边框图片效果基于CSS实现的四种多边形效果，分别是实心六边形、实心五边形、空心六边形、空心五边形。同时也实现了以多边形作为边框的图片显示效果，这些都是通过CSS的clip-path、aspect-ratio...
心形
CSS实现的心形图标，心形形状图片边框效果一款使用CSS实现的心形图标，使用了CSS的clip-path、mask-border以及aspect-ratio等关键属性实现，爱心可随意设置颜色，在img图片场景中使用爱心样式「class=...
缺角图片
使用 CSS 的 mask 蒙层属性设置 border-radius 实现缺角图片效果使用 CSS 的 mask 遮罩效果，以最少的代码创建倒置半径角。无额外元素、无伪元素、仅使用 CSS 变量进行实现，单个效果如下图所示，您可以在此效果的基础上进行组合再创作实现更多有创意的效果。
糖果开关
CSS 创意棒棒糖开关切换按钮，切换次数越多糖果越小！一款超有创意的棒棒糖开关切换效果，底层就是checkbox，外观基于CSS实现了棒棒糖的切换按钮，通过多次的切换操作棒棒糖会因为「摩擦」而逐渐减小，下方是切换前后的对比图片。切换的事件效果是通过...
机票UI
Tailwind CSS 电子机票UI布局网页效果基于 Tailwind CSS 框架实现的飞机票电子版UI布局效果，票的上层标题部分加入了飞机飞行的动画效果特别的有创意，动态天空背景动画效果是由一张静态天空图片通过CSS合理设置属性后实现的，...
拼图游戏
GSAP 趣味性十足的拼图网页小游戏一款有趣的拼图小游戏，基于gasp.js插件实现，拼图底板模块使用的是svg矢量图，通过gasp.js操控拖拽以及拼接事件，其中的拼图最终小猫图片是随机的，每次刷新都会出现不同的图片以增加拼图...
文字背景
CSS 文字打散重新组合动画背景效果使用CSS实现的一款炫酷创意十足的文字背景，实现原理是将文本附着于一张gif图片上，再通过css属性控制实现的文字打散重新组合的背景动画效果，使用该文字背景动画的网页更加炫酷且具有极强的科技感...
增删卡片
CSS 添加与移除卡片布局自动调整效果（使用view-transition-class实现）实现了灵活的增删卡片并自动调整布局的效果，卡片的布局使用了CSS的view-transition-class等关键属性实现，卡片的增删事件是由JavaScript实现的，用户可通过添加按钮（+）...
菜谱布局
CSS 极具创意的菜谱介绍网页布局使用纯CSS实现的烹饪过程菜谱介绍网页布局效果，该布局划分为两大区域，分别是食材图文介绍区以及烹饪过程视频区，两大区域可通过按钮平滑切换，其中的食材区可放置菜品成品图片以及所需要的食材和烹饪时间...
轮播特性
Swiper 动感十足的百叶窗轮播图动画效果这是一款使用Swiper + Particles + 少许CSS 创建的百叶窗轮播效果插件，下方带有圆点轮播进度指示器，能够通过指示器直观地观察图片切换的进度，可通过点击图片或者滚动鼠标两种方式...