Tailwind CSS结合PWA技术实现的体育赛事播报及体育资讯App模板
精品

斯卡思

Tailwind CSS结合PWA技术实现的体育赛事播报及体育资讯App模板

「斯卡思」是一款现代化、高性能的体育比赛以及体育资讯等体育行业App模板,是基于PWA技术结合Tailwind CSS技术实现的,可以被安装到用户升级等设备的主屏幕,提供接近原生应用的操作体验。...

PWA与Bootstrap技术结合实现的打车App乘客端以及司机端模板
精品

塔克斯

PWA与Bootstrap技术结合实现的打车App乘客端以及司机端模板

「塔克斯」是为打车平台设计的一款先进的Progressive Web App(PWA)模板,专为打造与原生应用App相似的用户体验而设计。非常适合网约车预定App、出租车预定App、顺风车App...

实现 HTML 页面四个边框文字滚动效果,滚动的文字源于视口中的段落标题!

文字滚动

实现 HTML 页面四个边框文字滚动效果,滚动的文字源于视口中的段落标题!

基于 CSS 实现的页面四周文字滚动播放效果,其中滚动的文字来源于当前页面视口的标题文字,而获取视口标题文字的方式是通过 GSAP 的 ScrollTrigger 插件。

CSS实现响应式面板倾斜排列布局,附带悬停面板扩大效果

倾斜面板

CSS实现响应式面板倾斜排列布局,附带悬停面板扩大效果

使用 CSS 中的 Flexbox 布局结合变形(skew)变换实现了倾斜面板排列效果。默认是横向的排列布局,针对较小屏幕的设备,布局会自动调整为纵向布局,具有将强的自适应能力,并且在鼠标悬停时...

基于 CSS 的 clip-path 实现图片悬浮变换形状效果

悬浮效果

基于 CSS 的 clip-path 实现图片悬浮变换形状效果

使用 CSS 的 clip-path 属性来创建鼠标悬停(hover)效果。clip-path 属性允许你定义一个形状,只有在这个形状内的部分才会被显示出来,而其他部分则会被裁剪掉。当用户将鼠标...

CSS带创意翻越动画效果的菜单切换图标,这是一个「灵活」的菜单切换图标!

动画菜单图标

CSS带创意翻越动画效果的菜单切换图标,这是一个「灵活」的菜单切换图标!

基于CSS的keyframes、transform以及animation等关键属性实现的「身手灵巧」的菜单切换图标动画效果,这个切换图标相当了不起,当你点击图标进行展开或者隐藏菜单操作时,图标的...

Bootstrap与PWA技术结合实现的内衣与服装电商App模板,支持深浅模式切换!
精品

尼比基

Bootstrap与PWA技术结合实现的内衣与服装电商App模板,支持深浅模式切换!

在当下竞争激烈的电商市场,用户体验和应用性能是决定一款电商App成功的关键。「内比基」模板是一款专为电商平台设计的强大PWA移动应用 App 模板,结合了Bootstrap 5和PWA技术的优势...

基于 PWA 和 Bootstrap 技术实现的健身房运动 App 模板,为健身和锻炼赋能!
精品

威固

基于 PWA 和 Bootstrap 技术实现的健身房运动 App 模板,为健身和锻炼赋能!

在健身App以及网站领域,用户体验至关重要。为了帮助健身房和个人教练打造一款用户友好功能齐全且充满互动的移动App,「威固」App应用模板应运而生。作为一款底层基于主流的响应式网站框架Boots...

CSS实现响应式网格菜单布局

网格布局

CSS实现响应式网格菜单布局

通过CSS实现的响应式菜单网格布局,无论是手机、平板还是电脑设备都能良好展示。在页面的左上方设置了一个典型的三条杠菜单图标按钮,点击该按钮会呈现出全页面的菜单网格布局,这时候左上角的菜单按钮变为...

使用CSS及JS实现可增减商品的购物车粘性侧边栏布局

固定侧边栏

使用CSS及JS实现可增减商品的购物车粘性侧边栏布局

在html5中使用CSS及JS实现的支持动态增减块级元素内容的固定侧边栏组件,并且支持一键清空内容,非常适用于购物车添加商品或者产品比对功能场景中。底层使用CSS的position: stick...

Bootstrap Datepicker日期选择器应用案例,并使用 jquery.dateFormat 格式化日期

日期选择器

Bootstrap Datepicker日期选择器应用案例,并使用 jquery.dateFormat 格式化日期

使用 Bootstrap Datepicker 日期选择器实现的应用案例,并且结合 jquery.dateFormat 格式化显示日期。支持语言、开始时间以及时间格式等多种自定义选项配置。

HTML网页中实现高亮显示滚动到视图中的文本。

标记文本

HTML网页中实现高亮显示滚动到视图中的文本。

利用 Intersection Observer API 以及 GSAP ScrollTrigger 两种技术实现了高亮显示滚动到视图中的文本效果。这两种技术可以通过实时监测屏幕中的某些“元素”...