纯 CSS 滑动标签切换动画效果,适用于标签切换、选择栏以及导航等场景

滑动切换

纯 CSS 滑动标签切换动画效果,适用于标签切换、选择栏以及导航等场景

这是一款纯CSS实现的动画分段控件效果,通过伪元素和过渡动画打造“滑动切换”的视觉效果,点击任意选项时,选中状态会以平滑的方式横向移动,仿佛按钮在“滑入”当前位置,悬停时,阴影标记跟随鼠标移动。...

纯CSS打造自定义曲线路径卡片轮播动画效果

曲线路径轮播

纯CSS打造自定义曲线路径卡片轮播动画效果

这是一款纯 CSS 实现的卡片路径滚动轮播,无需JavaScript,仅通过关键帧动画和transform属性控制每张卡片的位置与旋转,就能让卡片沿着自定义的非直线路径做循环滚动 —— 卡片还带...

带动态下雪动画背景的卡片(CSS+JS)

雪花背景卡片

带动态下雪动画背景的卡片(CSS+JS)

一款基于CSS+JS实现的动态下雪背景卡片,卡片最底层是一张冬季雪地场景图片,图片上写着文字,卡片的上方飘扬着雪花,像是一张爱情宣言卡片,透露着浪漫情调。

会下雪的天气卡片:动态雪天天气小组件(CSS+JS)

天气卡片

会下雪的天气卡片:动态雪天天气小组件(CSS+JS)

这是一款极简风格的雪天天气小部件,基于CSS动画与JavaScript交互实现,通过模糊背景图与动态粒子营造出真实感十足的降雪氛围。太阳与月亮会随时间平滑移动,云层缓缓飘过,雪花持续飘落,视觉上...

纯 CSS 滚动式图文卡片轮播组件,带左右与底部指示点联动导航按钮

滑动轮播

纯 CSS 滚动式图文卡片轮播组件,带左右与底部指示点联动导航按钮

这是一款纯CSS实现的轮播图效果,利用先进CSS属性 ::scroll-* 伪元素和容器查询技术,让当前展示项在滚动切换时自动触发动画,无需JavaScript即可完成流畅的视觉过渡。中间卡片放...

用视图过渡打造按钮丝滑切换体验(CSS+JS)

丝滑切换按钮

用视图过渡打造按钮丝滑切换体验(CSS+JS)

这是一款带有平滑过渡效果的切换按钮,基于CSS view-transition 和 JavaScript 实现,点击时按钮会以“内容流动”的方式动态切换选中状态,视觉上像是文字和颜色在空间中自然...

CSS自定义萌系猫咪主题下拉选择框(带尾巴联动选项选择效果)

萌萌下拉框

CSS自定义萌系猫咪主题下拉选择框(带尾巴联动选项选择效果)

这是一款趣味十足的猫咪主题下拉选择器,基于纯 CSS 技术实现,把普通下拉组件做得既实用又治愈,点击时猫尾巴会自动“摆动”并展开选项,带来轻松可爱的交互体验。默认状态是只安静躺着的黑猫,一旦触发...

3D翻转式霓虹玻璃质感RPG游戏角色卡:一张卡片,两种世界

游戏角色卡片

3D翻转式霓虹玻璃质感RPG游戏角色卡:一张卡片,两种世界

这是一款可翻转式玻璃态 RPG 角色卡片 UI,基于纯CSS3+原生JavaScript实现,把现代界面质感和游戏沉浸感结合得很巧妙,融合了玻璃拟态、霓虹光效和宇宙星空背景,打造出极具沉浸感的游...

中心焦点放大式图文轮播组件:让重点内容自动“站C位”(CSS+JS)

图文轮播

中心焦点放大式图文轮播组件:让重点内容自动“站C位”(CSS+JS)

​这是一款中心放大式生产力卡片轮播,基于 HTML、CSS以及JS 技术实现(全程未依赖第三方库),采用连续无分页的“单轨道连续滚动”形式,中间活跃卡片会自动放大突出重点,两侧还能显示两张迷你卡...

纯CSS自定义美化原生<select>下拉框:无需JS,也能优雅又实用

美化下拉框

纯CSS自定义美化原生<select>下拉框:无需JS,也能优雅又实用

这是一款纯CSS实现的自定义下拉选择器,通过样式覆盖原生<select>元素,打造了更美观、统一的交互体验。它没有依赖JavaScript,仅用CSS变量和伪元素实现了展开收起动画、选项高亮和状...

用CSS剪裁卡片倒圆角边框,打造高级感卡片边框设计

卡片边角

用CSS剪裁卡片倒圆角边框,打造高级感卡片边框设计

这是一款带倒圆角的步骤引导卡片​,基于CSS clip-path: shape() 技术实现,它把普通卡片的圆角做了 “倒切” 设计,视觉上比常规圆角更有新意、不单调,通过巧妙裁剪元素边缘,让卡...

移动端专用骨架屏加载动画(CSS+JS):支持明暗模式及动态静态模式

骨架屏

移动端专用骨架屏加载动画(CSS+JS):支持明暗模式及动态静态模式

这是一款骨架屏加载效果,基于CSS+JavaScript技术实现,它把界面适配与加载体验结合得很实用 —— 既能切换浅 / 深色主题模式适配不同使用场景(比如夜晚用深色更护眼),又能用骨架屏在内...