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