文字滚动
实现 HTML 页面四个边框文字滚动效果，滚动的文字源于视口中的段落标题！基于 CSS 实现的页面四周文字滚动播放效果，其中滚动的文字来源于当前页面视口的标题文字，而获取视口标题文字的方式是通过 GSAP 的 ScrollTrigger 插件。
倾斜面板
CSS实现响应式面板倾斜排列布局，附带悬停面板扩大效果使用 CSS 中的 Flexbox 布局结合变形（skew）变换实现了倾斜面板排列效果。默认是横向的排列布局，针对较小屏幕的设备，布局会自动调整为纵向布局，具有将强的自适应能力，并且在鼠标悬停时...
悬浮效果
基于 CSS 的 clip-path 实现图片悬浮变换形状效果使用 CSS 的 clip-path 属性来创建鼠标悬停（hover）效果。clip-path 属性允许你定义一个形状，只有在这个形状内的部分才会被显示出来，而其他部分则会被裁剪掉。当用户将鼠标...
动画菜单图标
CSS带创意翻越动画效果的菜单切换图标，这是一个「灵活」的菜单切换图标！基于CSS的keyframes、transform以及animation等关键属性实现的「身手灵巧」的菜单切换图标动画效果，这个切换图标相当了不起，当你点击图标进行展开或者隐藏菜单操作时，图标的...
尼比基
Bootstrap与PWA技术结合实现的内衣与服装电商App模板，支持深浅模式切换！在当下竞争激烈的电商市场，用户体验和应用性能是决定一款电商App成功的关键。「内比基」模板是一款专为电商平台设计的强大PWA移动应用 App 模板，结合了Bootstrap 5和PWA技术的优势...
威固
基于 PWA 和 Bootstrap 技术实现的健身房运动 App 模板，为健身和锻炼赋能！在健身App以及网站领域，用户体验至关重要。为了帮助健身房和个人教练打造一款用户友好功能齐全且充满互动的移动App，「威固」App应用模板应运而生。作为一款底层基于主流的响应式网站框架Boots...
网格布局
CSS实现响应式网格菜单布局通过CSS实现的响应式菜单网格布局，无论是手机、平板还是电脑设备都能完美展示。在页面的左上方设置了一个典型的三条杠菜单图标按钮，点击该按钮会呈现出全页面的菜单网格布局，这时候左上角的菜单按钮变为...
固定侧边栏
使用CSS及JS实现可增减商品的购物车粘性侧边栏布局在html5中使用CSS及JS实现的支持动态增减块级元素内容的固定侧边栏组件，并且支持一键清空内容，非常适用于购物车添加商品或者产品比对功能场景中。底层使用CSS的position: stick...
日期选择器
Bootstrap Datepicker日期选择器应用案例，并使用 jquery.dateFormat 格式化日期使用 Bootstrap Datepicker 日期选择器实现的应用案例，并且结合 jquery.dateFormat 格式化显示日期。支持语言、开始时间以及时间格式等多种自定义选项配置。
标记文本
HTML网页中实现高亮显示滚动到视图中的文本。利用 Intersection Observer API 以及 GSAP ScrollTrigger 两种技术实现了高亮显示滚动到视图中的文本效果。这两种技术可以通过实时监测屏幕中的某些“元素”...
光束
HTML 密码输入框灯光投射效果，实现密码隐藏与显示切换功能这是一款特别有创意且实用的控制密码输入框显示、隐藏切换的动画效果，利用CSS结合JavaScript技术实现的光束显示密码效果，并且光束会随着鼠标微微移动。当点击密码输入框右侧的眼睛小图标时会显...
颗粒猫
基于 Tailwind CSS 和 PWA 技术实现的高效响应式电商App模板在当前竞争激烈的电商环境中，用户对移动端购物体验的要求越来越高。要想在市场中脱颖而出，拥有一个功能强大、响应迅速且视觉效果出众的电商应用至关重要。「颗粒猫」模板是为此而生的一款现代化、响应式的全...