Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

前端终于有高级感的加载动画了！告别普通 spinner！分享一个超赞的 GitHub 开源项目 —— math-curve-loaders 专为追求极致美观与轻量前端项目而生，它把数学曲线变成极致优雅的加载动画！玫瑰曲线、李萨茹曲线、心形线…… 纯 HTML + CSS + JS 实现，零依赖、超轻量。每个动画都附带数学公式 + 可实时调整参数 + 一键复制代码，直接抄走就能用！数学之美 × 前端动效，视觉党与代码党都爱了 ❤️ 地址：

爱丽丝呀！

17,026 subscribers

56,101 Aufrufe • vor 12 Tagen •via X (Twitter)

Kunst Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。最爽的是自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。调好参数，一键复制完整代码，粘贴到项目里就能跑。以后做项目，你是更喜欢这种数学极客风，还是习惯用现成的 UI 库组件？

以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。最爽的是自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。调好参数，一键复制完整代码，粘贴到项目里就能跑。以后做项目，你是更喜欢这种数学极客风，还是习惯用现成的 UI 库组件？

Vincent | 信号＞噪音

70,205 Aufrufe • vor 1 Monat

开源一个我的数据可视化动画库，让工作展示+内容制作高级10倍！包含11个高级数据可视化效果，项目的代码+自己的数据丢给AI，直接做出属于你的专业数据可视化动画！项目开源地址：

开源一个我的数据可视化动画库，让工作展示+内容制作高级10倍！包含11个高级数据可视化效果，项目的代码+自己的数据丢给AI，直接做出属于你的专业数据可视化动画！项目开源地址：

木子不写代码

29,938 Aufrufe • vor 3 Monaten

分享一个前端和 UI 设计师绝对不能错过的宝藏库！🎨 Anime.js 一个轻量级但功能强大的 JavaScript 动画引擎。 📌 它是干嘛的？简单说，它能帮你轻松实现各种丝滑的 UI 动效。不管是 CSS 属性、SVG、DOM 还是 JS 对象，都能 animate 起来。 📌 为什么强推？ ✅功能全：时间线 (Timeline)、缓动、布局动画、错位动画 (Stagger) 等等，你想要的效果这里基本都有。 ✅文档太友好了：这是最赞的一点！每个动画示例旁边直接附带代码，一键复制就能用。 ✅支持二创：可以直接跳转到 CodePen 在线修改代码，调试非常方便。 ✅完全免费：GitHub 67.1k Star 的开源项目，闭眼冲。不管是做网页特效还是交互动画，这个库都能极大提升效率，每位 Web 开发者都值得收藏！🚀 项目地址放评论区了👇

分享一个前端和 UI 设计师绝对不能错过的宝藏库！🎨 Anime.js 一个轻量级但功能强大的 JavaScript 动画引擎。 📌 它是干嘛的？简单说，它能帮你轻松实现各种丝滑的 UI 动效。不管是 CSS 属性、SVG、DOM 还是 JS 对象，都能 animate 起来。 📌 为什么强推？ ✅功能全：时间线 (Timeline)、缓动、布局动画、错位动画 (Stagger) 等等，你想要的效果这里基本都有。 ✅文档太友好了：这是最赞的一点！每个动画示例旁边直接附带代码，一键复制就能用。 ✅支持二创：可以直接跳转到 CodePen 在线修改代码，调试非常方便。 ✅完全免费：GitHub 67.1k Star 的开源项目，闭眼冲。不管是做网页特效还是交互动画，这个库都能极大提升效率，每位 Web 开发者都值得收藏！🚀 项目地址放评论区了👇

Vincent | 信号＞噪音

14,923 Aufrufe • vor 1 Monat

这护盾效果太牛了，可实时交互的 WebGL 能量护盾特效项目，用 React Three Fiber、Three.js 和手写 GLSL shader 做出来的。带了完整的 3D Playground，可以实时调 hex grid、hitimpact、生命值系统、显隐动画、bloom 等参数。对于做创意前端、游戏 VFX、WebGL视觉实验的人来说，这种“效果做出来了，还把可调参数和结构一起开源”的项目，观感会比普通 shader demo 高一个档次。

这护盾效果太牛了，可实时交互的 WebGL 能量护盾特效项目，用 React Three Fiber、Three.js 和手写 GLSL shader 做出来的。带了完整的 3D Playground，可以实时调 hex grid、hitimpact、生命值系统、显隐动画、bloom 等参数。对于做创意前端、游戏 VFX、WebGL视觉实验的人来说，这种“效果做出来了，还把可调参数和结构一起开源”的项目，观感会比普通 shader demo 高一个档次。

Geek Lite

20,523 Aufrufe • vor 3 Monaten

给前端同学安利一个轻量级网站验证码开源库：Cap，可作为传统 CAPTCHA 的开源替代方案。它基于 SHA-256 的工作量证明机制，彻底告别拼图/图片识别那套，仅 20kb，几乎不影响加载，不做任何跟踪，也不收集数据。 GitHub：展示形态也很灵活：可见、隐形、浮动等都支持，前后端样式和校验逻辑都能按需改。兼容任意 JS 运行时、零依赖，亦可用 Docker 一键部署。

给前端同学安利一个轻量级网站验证码开源库：Cap，可作为传统 CAPTCHA 的开源替代方案。它基于 SHA-256 的工作量证明机制，彻底告别拼图/图片识别那套，仅 20kb，几乎不影响加载，不做任何跟踪，也不收集数据。 GitHub：展示形态也很灵活：可见、隐形、浮动等都支持，前后端样式和校验逻辑都能按需改。兼容任意 JS 运行时、零依赖，亦可用 Docker 一键部署。

Joruno

50,536 Aufrufe • vor 2 Monaten

发现个前端圈公认的动画神器，68K stars 真的不是吹的！ anime.js —— 一个轻量级但功能极其强大的 JavaScript 动画引擎。前端兄弟们又来享福了，这玩意儿简直是“动画师的瑞士军刀”： 🎨 全能型选手不管是 CSS 属性、SVG、DOM 属性，还是 JavaScript 对象，它都能让你动起来。想搞顺滑的光标特效、复杂的滚动视差、还是丝滑的 UI 过渡，它全包了。 API 直观且轻量代码写起来非常优雅，像写时间线一样简单。支持模块化引入，你只需要引入你需要的部分，保持 bundle 体积超小，性能拉满。 🛠️ 开箱即用官网（ Demo，每个动画都直接配好了代码，一键复制就能用，拿去二次创作简直不要太方便。看它那个相机拆解的动画演示，流畅度真的绝了。搞前端开发、做交互设计的，这个库必须收藏在工具箱里。项目地址放评论区了👇

发现个前端圈公认的动画神器，68K stars 真的不是吹的！ anime.js —— 一个轻量级但功能极其强大的 JavaScript 动画引擎。前端兄弟们又来享福了，这玩意儿简直是“动画师的瑞士军刀”： 🎨 全能型选手不管是 CSS 属性、SVG、DOM 属性，还是 JavaScript 对象，它都能让你动起来。想搞顺滑的光标特效、复杂的滚动视差、还是丝滑的 UI 过渡，它全包了。 API 直观且轻量代码写起来非常优雅，像写时间线一样简单。支持模块化引入，你只需要引入你需要的部分，保持 bundle 体积超小，性能拉满。 🛠️ 开箱即用官网（ Demo，每个动画都直接配好了代码，一键复制就能用，拿去二次创作简直不要太方便。看它那个相机拆解的动画演示，流畅度真的绝了。搞前端开发、做交互设计的，这个库必须收藏在工具箱里。项目地址放评论区了👇

Vincent | 信号＞噪音

61,019 Aufrufe • vor 1 Monat

Pixel2Motion，一个能把静态 logo 直接变成矢量动画的开源工具丢一张 PNG 或 JPG 进去，它先用 AI 把像素图转成矢量路径，然后自动生成动画效果，输出无损的 SVG 有几个细节挺讲究的： -转矢量的时候会跟原图做叠拼误差校验，反复迭代直到还原度够高 -动画生成遵循迪士尼动画12法则，所以动起来的节奏感不像是随便加的 -输出格式支持 SVG、HTML代码、GIF、视频它本身是一个开源的 Codex 和 Claude 技能，也兼容其他多模态 Agent 以前给 logo 加动画要在 After Effects 里一帧帧调，现在一个命令就出来了 GitHub 地址放在评论区了做设计或者前端的可以看看，尤其是经常被甲方要求"logo能不能动一下"的

Vincent | 信号＞噪音

20,627 Aufrufe • vor 13 Tagen

不用写一行代码也能做管理系统？这套AI开发流程让程序员都慌了 1.你打开ChatGPT，输入提示词："帮我生成一个学生管理系统的Spring Boot项目代码" 2.你用Cursor打开生成的项目，自动修复报错，导入MySQL数据库 3.你启动前后端，测试增删改查功能你按这个流程操作，1小时内就能看到自己的管理系统上线。

不用写一行代码也能做管理系统？这套AI开发流程让程序员都慌了 1.你打开ChatGPT，输入提示词："帮我生成一个学生管理系统的Spring Boot项目代码" 2.你用Cursor打开生成的项目，自动修复报错，导入MySQL数据库 3.你启动前后端，测试增删改查功能你按这个流程操作，1小时内就能看到自己的管理系统上线。

Vincent | 信号＞噪音

25,708 Aufrufe • vor 2 Monaten

以前想要制作数学和物理教学这类交互动画，需要用到 Manim 这些专业工具，还得搞清楚 LaTeX 公式渲染和相机运动等。现在用 Math-To-Manim 这个开源 AI 工具，只需要一句话简单描述就能自动生成完整的交互动画。从分析概念逐步构建到目标主题，自动生成包含详细 LaTeX 公式和镜头设计，全流程自动化完成。 GitHub：同时输出动画代码和完整的 LaTeX 学习笔记文档，并提供了 55+ 个涵盖物理、数学、计算机科学等领域的示例动画。通过克隆代码到本地，安装相关依赖，并配置好模型 API Key，即可在可视化操作界面输入描述生成动画。

以前想要制作数学和物理教学这类交互动画，需要用到 Manim 这些专业工具，还得搞清楚 LaTeX 公式渲染和相机运动等。现在用 Math-To-Manim 这个开源 AI 工具，只需要一句话简单描述就能自动生成完整的交互动画。从分析概念逐步构建到目标主题，自动生成包含详细 LaTeX 公式和镜头设计，全流程自动化完成。 GitHub：同时输出动画代码和完整的 LaTeX 学习笔记文档，并提供了 55+ 个涵盖物理、数学、计算机科学等领域的示例动画。通过克隆代码到本地，安装相关依赖，并配置好模型 API Key，即可在可视化操作界面输入描述生成动画。

GitHubDaily

39,865 Aufrufe • vor 8 Monaten

非常酷的用例，Christian H. Cooper 基于DeepSeek R1-Zero生成的Manim数学动画视频，不到30秒钟无误的生成了勾股定理解释动画，9分钟一次性完成了量子电动力学概念的视觉化。未来教育和知识的传播越来越便捷 #数学动画 #DeepSeekR1Zero #AI数学动画生成

非常酷的用例，Christian H. Cooper 基于DeepSeek R1-Zero生成的Manim数学动画视频，不到30秒钟无误的生成了勾股定理解释动画，9分钟一次性完成了量子电动力学概念的视觉化。未来教育和知识的传播越来越便捷 #数学动画 #DeepSeekR1Zero #AI数学动画生成

AIGCLINK

39,230 Aufrufe • vor 1 Jahr

🔥 前端动画界的老大 GSAP，又扔出了一颗炸弹：gsap-skills！ 90% 的网页动效只是乏味的淡入淡出，但 Apple 风滚动、数据可视化动画、沉浸式产品页背后的秘密，全在 GSAP。 GSAP 官方直接放出 gsap-skills：支持 Cursor、Claude Code、Copilot、Google Antigravity、Windsurf 等几乎所有主流 Agent，自动识别。神亮点： - 25+ 高级动画实战案例，一键学会 Timeline、ScrollTrigger、Ease 等核心技能 - 让 AI 或开发者都能瞬间生成丝滑、专业、高级感爆棚的动效 - 免费开源，商业项目直接用 - 性能极致流畅，复杂动画也不卡顿 - 跨框架支持：React、Vue、Svelte、原生 JS 全覆盖 - 官方教程 + 实战案例 = 动效学习最快捷径 GSAP 本身已全部免费（原 Club 高级插件全部白送），现在再加上这套官方 skill，装完直接甩需求给 AI，感受 Apple 级动效秒出的爽感！

🔥 前端动画界的老大 GSAP，又扔出了一颗炸弹：gsap-skills！ 90% 的网页动效只是乏味的淡入淡出，但 Apple 风滚动、数据可视化动画、沉浸式产品页背后的秘密，全在 GSAP。 GSAP 官方直接放出 gsap-skills：支持 Cursor、Claude Code、Copilot、Google Antigravity、Windsurf 等几乎所有主流 Agent，自动识别。神亮点： - 25+ 高级动画实战案例，一键学会 Timeline、ScrollTrigger、Ease 等核心技能 - 让 AI 或开发者都能瞬间生成丝滑、专业、高级感爆棚的动效 - 免费开源，商业项目直接用 - 性能极致流畅，复杂动画也不卡顿 - 跨框架支持：React、Vue、Svelte、原生 JS 全覆盖 - 官方教程 + 实战案例 = 动效学习最快捷径 GSAP 本身已全部免费（原 Club 高级插件全部白送），现在再加上这套官方 skill，装完直接甩需求给 AI，感受 Apple 级动效秒出的爽感！

开发者Hailey

129,745 Aufrufe • vor 29 Tagen

高级数据可视化神器，不用写代码，不用设计基础，上传数据就能出图 ✔ 动态图表（折线图 / 柱状图 / 饼图） ✔ 交互地图（超级适合做分析报告） ✔ 动画数据（比如那种“排名变化动起来”的图） ✔ 甚至还能做“滚动式数据故事”（像新闻专题一样）

高级数据可视化神器，不用写代码，不用设计基础，上传数据就能出图 ✔ 动态图表（折线图 / 柱状图 / 饼图） ✔ 交互地图（超级适合做分析报告） ✔ 动画数据（比如那种“排名变化动起来”的图） ✔ 甚至还能做“滚动式数据故事”（像新闻专题一样）

无颜

107,069 Aufrufe • vor 3 Monaten

这个有点酷⚡️ 基于 Claude MCP 协议直接开发「移动端 iOS」应用？🤯 Cali 这个开源项目直接将 Claude 带入直接开发移动端应用的时代🔥，基于 MCP 协议实现 React Native 相关的命令，让用户与 Claude 交互直接开发可发布的 iOS/Android App 开源地址 👉

这个有点酷⚡️ 基于 Claude MCP 协议直接开发「移动端 iOS」应用？🤯 Cali 这个开源项目直接将 Claude 带入直接开发移动端应用的时代🔥，基于 MCP 协议实现 React Native 相关的命令，让用户与 Claude 交互直接开发可发布的 iOS/Android App 开源地址 👉

Tom Huang

34,950 Aufrufe • vor 1 Jahr

王炸🤣😂 Google AI Studio 正式推出了全新全栈 vibe coding 体验，通过 Antigravity 编码代理 + Firebase 原生后端集成，前端和后端终于无缝连接在一起了。感动到了，AI Studio终于告别了不只是前端那么简单了。我体验了下，项目启动前会先分配一定的空间用来存储后台服务相关的数据。以后只要你有想法，从前端UI到后端服务，纯粹一条龙服务了。

王炸🤣😂 Google AI Studio 正式推出了全新全栈 vibe coding 体验，通过 Antigravity 编码代理 + Firebase 原生后端集成，前端和后端终于无缝连接在一起了。感动到了，AI Studio终于告别了不只是前端那么简单了。我体验了下，项目启动前会先分配一定的空间用来存储后台服务相关的数据。以后只要你有想法，从前端UI到后端服务，纯粹一条龙服务了。

比特币橙子Trader

107,105 Aufrufe • vor 3 Monaten

这个太漂亮了： Strange Attractors 是一个使用 Three.js 实现的动态系统可视化工具，它通过简单的数学方程展示了混沌系统的复杂美感。通过观察不同参数下的 Thomas Attractor，用户可以直观地体验到‘蝴蝶效应’，即微小的变化如何导致完全不同的结果。这个工具不仅展示了混沌理论的奇妙之处，还让普通人也能感受到数学之美。左侧可以修改不同的方程，右边还可以调整参数。我对混沌系统并没有什么了解，但是画面太美了，涌现宇宙之美，情不自禁的呆呆的看了很久，从混沌中涌现秩序，也许是美学的极致。

这个太漂亮了： Strange Attractors 是一个使用 Three.js 实现的动态系统可视化工具，它通过简单的数学方程展示了混沌系统的复杂美感。通过观察不同参数下的 Thomas Attractor，用户可以直观地体验到‘蝴蝶效应’，即微小的变化如何导致完全不同的结果。这个工具不仅展示了混沌理论的奇妙之处，还让普通人也能感受到数学之美。左侧可以修改不同的方程，右边还可以调整参数。我对混沌系统并没有什么了解，但是画面太美了，涌现宇宙之美，情不自禁的呆呆的看了很久，从混沌中涌现秩序，也许是美学的极致。

Viking

28,907 Aufrufe • vor 7 Monaten

Gemini Pro 3已经上线了，绝对的新王，不管懂不懂代码都可以用它写出极具美感的网页，每个人都值得一试。例如生成会转的电风扇SVG、画手机、画MacBook、漂亮交互的天气卡片。我视频里效果的提示词：画一个极具现代设计美学的时装秀的网站，要求有奢华的交互，前卫的设计除了官方Gemini渠道外，我推荐Zenmux，目前免费（每天限量）且国内直连可用，可以在线使用或API调用。黑五期间充值有优惠，额外送20%金额，价格比OpenRouter低。现在就已经能用，地址：

Gemini Pro 3已经上线了，绝对的新王，不管懂不懂代码都可以用它写出极具美感的网页，每个人都值得一试。例如生成会转的电风扇SVG、画手机、画MacBook、漂亮交互的天气卡片。我视频里效果的提示词：画一个极具现代设计美学的时装秀的网站，要求有奢华的交互，前卫的设计除了官方Gemini渠道外，我推荐Zenmux，目前免费（每天限量）且国内直连可用，可以在线使用或API调用。黑五期间充值有优惠，额外送20%金额，价格比OpenRouter低。现在就已经能用，地址：

Gorden Sun

58,441 Aufrufe • vor 7 Monaten

nexu 正式发布 v0.1.6 🚀 这个效果也太好了💥 3 天，几百次提交🌟，可能是目前 Openclaw 🦞桌面端最生产级别开发实践了⚡️ 开机动效、自动更新、数万个 Skills、启动速度优化（22 s -> 7s）、后台模式🤯 直接看源码就能够抄的走的小技巧完全开源，支持点 Star 👉

nexu 正式发布 v0.1.6 🚀 这个效果也太好了💥 3 天，几百次提交🌟，可能是目前 Openclaw 🦞桌面端最生产级别开发实践了⚡️ 开机动效、自动更新、数万个 Skills、启动速度优化（22 s -> 7s）、后台模式🤯 直接看源码就能够抄的走的小技巧完全开源，支持点 Star 👉

Tom Huang

40,405 Aufrufe • vor 3 Monaten

GitHub今天又涨了1000多星的爆火开源项目：《Hello 算法》⬇️ 本项目旨在打造一本开源免费、新手友好的数据结构与算法入门教程。全书采用动画图解，内容清晰易懂、学习曲线平滑，引导初学者探索数据结构与算法的知识地图。制作精良，持续更新！ GitHub：官网：

GitHub今天又涨了1000多星的爆火开源项目：《Hello 算法》⬇️ 本项目旨在打造一本开源免费、新手友好的数据结构与算法入门教程。全书采用动画图解，内容清晰易懂、学习曲线平滑，引导初学者探索数据结构与算法的知识地图。制作精良，持续更新！ GitHub：官网：

知识分享官

69,724 Aufrufe • vor 2 Jahren

又挖到一个自媒体神器，我直接 fork 了！🔥 ReClip —一个极致轻量、自托管的视频/音频下载工具，用完直接上头！神亮点： - 支持 YouTube、TikTok、Instagram、Twitter/X、Bilibili 等 1000+ 主流网站 - 一键下载 MP4 视频或 MP3 音频 - 支持批量粘贴多个链接，自动去重 - 可自由选择画质、分辨率、音频比特率 - 纯前端设计（单个 HTML + 原生 JS），后端只有 150 行 Python - Docker 一键部署，资源占用极低没有 React 那种臃肿构建，没有复杂框架，就是极简、高效、极客风的完美典范！相比那些广告横飞的在线下载网站，ReClip 的优势太明显了：隐私安全 + 可完全自控 + 永久可用 + 不用担心跑路。

又挖到一个自媒体神器，我直接 fork 了！🔥 ReClip —一个极致轻量、自托管的视频/音频下载工具，用完直接上头！神亮点： - 支持 YouTube、TikTok、Instagram、Twitter/X、Bilibili 等 1000+ 主流网站 - 一键下载 MP4 视频或 MP3 音频 - 支持批量粘贴多个链接，自动去重 - 可自由选择画质、分辨率、音频比特率 - 纯前端设计（单个 HTML + 原生 JS），后端只有 150 行 Python - Docker 一键部署，资源占用极低没有 React 那种臃肿构建，没有复杂框架，就是极简、高效、极客风的完美典范！相比那些广告横飞的在线下载网站，ReClip 的优势太明显了：隐私安全 + 可完全自控 + 永久可用 + 不用担心跑路。

开发者Hailey

48,402 Aufrufe • vor 1 Monat

可以拿来做教育演示的一款动画引擎AI工具，Fogsight，给定一个概念词，它即会生成一段叙事完整的动画整个动画的叙事完整性、趣味性、视觉效果都还可以，用在教育上，把抽象概念做成教学动画非常实用生成的动画还配有双语旁白智能编排，从旁白、视觉元素到动态效果，整个工作流自动完成有用户界面，可以进一步编辑和优化生成效果代码作者是开源的，见下条 #AI教学动画 #Fogsight #AI教育

可以拿来做教育演示的一款动画引擎AI工具，Fogsight，给定一个概念词，它即会生成一段叙事完整的动画整个动画的叙事完整性、趣味性、视觉效果都还可以，用在教育上，把抽象概念做成教学动画非常实用生成的动画还配有双语旁白智能编排，从旁白、视觉元素到动态效果，整个工作流自动完成有用户界面，可以进一步编辑和优化生成效果代码作者是开源的，见下条 #AI教学动画 #Fogsight #AI教育

AIGCLINK

56,108 Aufrufe • vor 11 Monaten