-
CSS教程 – 伪元素实现箭头提示框效果
前言 在前端开发中，提示框（Tooltip/Callout）是一种常见的交互组件。它通常会附带一个小箭头，指向触发元素，让用户更直观地理解提示的来源。 实现提示框的小箭头，有多种方式：可以用图片、SVG，也可以用 纯 CSS 伪元素。本文将通过 ::after 伪元素和 CSS 边框三角形 的技巧，轻松实现一个 带箭头的提示框，支持四个方向：上、下、左、右。 实现教程 1.HTML 结构 我们只需…- 0
- 0
- 4
-
下载1个资源
React Bits & Vue Bits：打造惊艳动画 UI 的神器
在前端开发中，UI 动画和交互动效往往是最能打动用户的部分。一个精致的过渡效果、一个灵动的文字动画，都能让界面瞬间“活起来”。最近我发现了两个非常值得推荐的开源项目 —— React Bits 和 Vue Bits，它们可以说是 React 和 Vue 开发者的“宝藏级”动画组件库。 项目特色 开源免费：由开发者 David Haz 维护，持续更新中。 高颜值动画：组件设计感强，非常适合展示页、作…- 0
- 0
- 10
-
下载1个资源
liquid-glass-react：打造苹果风格的液态玻璃 UI 效果
在苹果 iOS 26 的 UI 更新中，推出了令人惊艳的“液态玻璃”（Liquid Glass）视觉效果，界面元素呈现出类似磨砂玻璃的半透明、流动感十足的质感。如果你也想在 React 项目中实现这一效果，不妨试试开源库 liquid-glass-react。 项目概览 liquid-glass-react 是一个轻量级的 React 组件库，旨在为你的 UI 元素添加苹果风格的液态玻璃效果。它支…- 0
- 0
- 30
-
下载1个资源
UIBundle：设计师和产品开发者的创意百宝箱
在 UI/UX 设计、产品开发和原型制作的过程中，优质的设计资源能极大地提升效率与表现力。而 UIBundle（uibundle.com）就是这样一个宝贵的平台——无论你是设计新手还是资深从业者，它都能为你提供丰富的灵感与实用素材。 UIBundle 是什么？ UIBundle 是一个专门提供 UI 设计资源、字体、图标、原型文件 等的在线平台，聚合了来自全球独立创作者的优质素材，为你的设计项目提…- 0
- 0
- 0
-
下载1个资源
一个预加载网站，提升网站速度的 JS
简介 instant.page 是一个超轻量级的 JS 脚本，用来给网页增加“预加载”功能。它的原理很简单：当用户把鼠标悬停在一个链接上时，它会在后台偷偷预加载目标页面，这样用户真正点击时就能更快打开。 大致意思应该是： 桌面端：在用户单击链接之前，他们将鼠标悬停在该链接上。当用户悬停了 65 毫秒时，有一次机会在两个链接上单击，因此此时 instant.page 开始预加载，平均留下超过 300…- 0
- 1
- 34
-
下载1个资源
Shapes 2.0：设计师的 SVG 形状灵感库，助你灵动每个界面细节
在网页设计和原型制作过程中，小细节往往能提升整体美感，而 SVG 形状素材就是这些点睛之笔之一。如果你正想快速找到灵动又可叠加的图形片段，那么 Shapes 2.0 是你值得收藏的在线资源。 什么是 Shapes 2.0？ Shapes 2.0 是一个提供 120+ 可复制粘贴 SVG 形状 的在线素材平台，只需点击任意形状，即可将其 SVG 代码复制到剪贴板，迅速用于你的设计或项目中。 该项目由…- 0
- 0
- 6
-
下载1个资源
惊艳的CSS3 3D卡片层叠动画 - 值得收藏的前端特效
项目简介 这是一个令人印象深刻的纯CSS3实现的3D卡片层叠动画效果，完美展示了现代CSS的强大能力。无需任何JavaScript，仅用CSS就创造出了极具视觉冲击力的交互体验。 项目亮点 3D透视效果：巧妙运用transform3d和preserve-3d创造真实的立体感 渐变背景：每张卡片都采用精心调配的线性渐变，色彩层次丰富 光影效果：通过box-shadow…- 0
- 0
- 3
-
下载1个资源
daisyUI：Tailwind CSS 最好用的组件库
如果说 Tailwind CSS 是一个高效的原子化 CSS 工具库，那么 daisyUI 就是它的完美搭档。作为 Tailwind CSS 的插件，daisyUI 提供了丰富的现成 UI 组件，让你可以在保持 Tailwind 灵活性 的同时，快速构建漂亮的界面。 什么是 daisyUI？ daisyUI 是基于 Tailwind CSS 的开源组件库。它直接扩展了 Tailwind 的能力，内…- 0
- 0
- 0
-
下载1个资源
Framer Motion：让 React 动起来的动画利器
在前端开发中，动画不仅仅是“锦上添花”，更是提升用户体验和交互细节的关键。一个恰到好处的动效，能让页面显得灵动自然，也能有效传递信息。而在 React 生态中，最受欢迎的动画库之一，就是 Framer Motion。 什么是 Framer Motion？ Framer Motion 是一个 基于 React 的动画库，由 Framer 团队开发。它主打 易用性 和 流畅体验，开发者无需繁琐的动画曲…- 0
- 0
- 5
-
下载1个资源
仿bilibili焦点图轮播组件 - 源码分享
今天给大家分享一个高仿bilibili首页焦点图轮播组件的源码实现，由墨星博客站长开发，并在他代码的基础上进行了优化，演示效果如图二。这个组件完美复刻了B站首页的轮播效果，包括主图轮播、缩略图预览、鼠标悬停切换等交互功能。 项目特色 主图轮播：支持自动播放、手动切换 缩略图预览：底部显示所有图片的缩略图 渐变遮罩：底部渐变效果，视觉层次更丰富 交互体验：鼠标悬停缩略图即可切换主图 响应式设计：适配…- 0
- 0
- 40
-
下载1个资源
Uiverse：一个免费共享UI组件的宝藏网站
在前端开发和设计过程中，精美的UI组件和动画效果往往能让页面脱颖而出。然而从零开始设计这些组件，不仅费时费力，还需要一定的设计功底。好消息是，Uiverse 为我们提供了一个免费的UI代码分享平台，让开发者和设计师可以快速获取并使用各种精美组件。 什么是Uiverse？ Uiverse是一个开源的UI代码片段分享网站，里面汇集了来自全球开发者的创意作品。无论你需要按钮、卡片、导航栏还是加载动画，这…- 0
- 1
- 16
-
让你的文字和图形动起来——简单 SVG 手写动画定制
你有没有想过，让文字、图标或者 Logo 能像被手绘一样一点点显现，会比普通静态展示更吸引人？简单 SVG 手写动画就是这种效果，它用最基础的动画手法，让你的内容动起来，轻松提升视觉趣味性。 为什么选择简单 SVG 手写动画？ 流畅自然：动画沿着路径逐渐显现，看起来像真实手写。 轻量快速：SVG 文件小，加载快，不影响网页性能。 多场景应用：适合网站、PPT 演示、社交媒体动态展示。 易于定制：文…- 0
- 0
- 18
-
下载1个资源
Tailwind CSS：前端开发者必备的原子化 CSS 框架
在现代前端开发中，如何快速高效地写出可维护、可复用的样式，是每一位开发者都会面临的问题。传统的 CSS 写法容易冗余，组件库又可能过于臃肿。想要兼顾灵活与高效，Tailwind CSS 无疑是一个非常值得推荐的选择。 什么是 Tailwind CSS？ Tailwind CSS 是一个 功能类优先（Utility-First） 的 CSS 框架，它不同于传统的组件化框架（如 Bootstrap），…- 0
- 0
- 5
-
下载1个资源
SVG Glass Icons：免费又高质感的玻璃风格图标合集
在做 UI 设计或者网页开发的时候，图标往往能起到画龙点睛的作用。相比传统的扁平化风格，玻璃质感（Glassmorphism）图标以独特的光影和半透明效果，让界面更具科技感与未来感。今天给大家推荐一套免费资源 —— SVG Glass Icons，由知名图标平台 Nucleo 提供。 图标特点 现代玻璃质感：带有轻微 3D 效果，通透明亮，符合当下流行的 Glassmorphism 风格。 规范化…- 0
- 1
- 3
-
下载1个资源
Spline —— 下一代3D设计与互动创作工具
在数字创意和交互式设计快速发展的今天，Spline 正逐渐成为设计师、开发者和创作者们的新宠。它是一款基于浏览器的 3D 设计与协作平台，无需复杂的软件安装，就能让用户快速上手 3D 建模、动画和交互设计，打破了传统 3D 工具学习曲线陡峭、门槛高的局限。 什么是 Spline？ Spline 是一款轻量级但功能强大的 实时 3D 设计工具。与 Blender、Maya 等专业 3D 软件不同，它…- 0
- 2
- 42
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×