animejs示例
发表于|更新于
|浏览量:
读书使人充实，思考使人深邃，交谈使人清醒。——富兰克林
https://codepen.io/collection/XLebem/
这里有anime.js实现的不少案例
例如移动端的卡片弹出动画实现：
https://codepen.io/aryankap/pen/poERmEM
带进度条的提交按钮：
https://codepen.io/andrewmillen/pen/MoKLob
带动画的小图标：
https://codepen.io/nat-davydova/details/dyorEMm
夜间模式切换按钮：
https://codepen.io/borntofrappe/details/aboPapm
等等
相关推荐
2025-08-26
fabricjs
没有比脚更长的路，没有比人更高的山。――汪国真《山高路远》 Fabric.js：浏览器里的 Canvas 超级引擎 —— 让前端图形开发极致自由在现代网页开发中，图形和可视化已成为用户体验的关键一环。无论是在线图片编辑、白板、流程图、交互动画，还是数据可视化，HTML5 Canvas 都是前端开发者的“画布”。但原生 Canvas API 虽强，却略显底层、开发门槛高。你是否想在浏览器里拥有类似 Photoshop、PowerPoint 的自由拖拽、变形、分组、交互体验？如果答案是 YES，那你不能错过 Fabric.js —— 这个让前端图形开发“飞起来”的开源超级引擎！ 一、项目简介Fabric.js 是一个功能强大的 Javascript Canvas 库，专为现代浏览器设计，能让开发者用极少代码实现复杂的图形对象创建、编辑、管理与交互。它不仅支持 Canvas 的全部绘图能力，还提供了对象化管理、序列化、事件监听、自由变形等高级功能，成为前端图形应用的“事实标准”。 项目地址：https://github.com/fabricjs/fabric.js 官网演示：h...
2023-01-07
react新版api
我们飞得越高，我们在那些不能飞的人眼中的形象就越渺小。——尼采的《查拉图斯特拉如是说》 如果你是在react18这么写： 123456// index.tsximport React from 'react'import ReactDOM from 'react-dom'console.log('Hello from tsx!')ReactDOM.render(<p>Hello</p>, document.getElementById('root')) 你会得到一个错误 1react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. L...
2024-06-11
tensorflowjs
生命的定义就是拥有明天。——冯骥才 我们有一些前端机器学习的需求可以用这个 https://www.tensorflow.org/js/demos?hl=zh-cn 这有非常多的demo Holobooth 也很好玩 https://lipsync.withyoutube.com/ 开始 bookmark_border TensorFlow.js 是一个 JavaScript 库，用于在浏览器和 Node.js 训练和部署机器学习模型。 了解开始的更多方式，请参阅下面的部分。 在不直接处理张量的情况下编写 ML 程序想要开始机器学习，同时不用担心任何类似张量或优化器的低级细节吗？ ml5.js 库构建在 TensorFlow.js 之上，通过简洁的、可利用的 API，可以在浏览器中访问机器学习算法和模型。 Check out ml5.js 安装 TensorFlow.jsTensorFlow.js 与 Tensors (张量)、Layers (图层)、Optimizers (优化器) 和损失函数等概念兼容（或希望与它们兼容）吗？TensorFlow.js 为 JavaScr...
2025-06-16
mermaid-live-editor
教学的艺术不在于传授本领，而在于关于激励、唤醒、鼓舞。——第斯多惠 https://github.com/mermaidjs/mermaid-live-editor Mermaid Live Editor：在线绘制和分享流程图、时序图的神器在日常开发、产品设计和文档编写中，流程图、时序图、甘特图等可视化图形是表达系统逻辑、业务流程和协作方案的利器。Mermaid 作为一款流行的文本化图形描述工具，在开发者和技术团队中拥有极高的口碑。而 @mermaidjs/mermaid-live-editor 正是将 Mermaid 的强大能力带到了浏览器，让你即开即用、即写即画。 什么是 Mermaid Live Editor？Mermaid Live Editor 是一个基于浏览器的在线编辑器，专门用于编写和实时渲染 Mermaid 语法的各种图表。你只需要用简单的 Markdown 风格文本描述图表结构，编辑器即可自动渲染为可视化图形，并且支持导出、分享、预览等便捷操作。 主要特性1. 实时预览与高亮 左侧输入 Mermaid 语法，右侧实时渲染对应图形。 支持语法高亮...
2022-05-18
CompositionEvent
业余生活要有意义，不要越轨。——华盛顿 分享一个输入法事件：CompositionEvent 这个事件只在用户间接输入文本（如使用输入法）时触发： 例如下面这个例子： 123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html><head> <title></title></head><body> <div class="control"> <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> ...
2025-04-13
nuxt
忘记了它而微笑，远胜于记住它而愁苦。——罗西塔 Nuxt.js：构建现代 Web 应用的强大框架Nuxt.js 是一个基于 Vue.js 的开源框架，旨在简化开发现代 Web 应用的工作流程。无论是服务端渲染 (SSR)、静态网站生成 (SSG)，还是单页应用 (SPA)，Nuxt.js 都提供了一套强大而灵活的解决方案。 背景与简介Nuxt.js 起源于 2016 年，由 Sebastien Chopin 和 Alexandre Chopin 创立。它的初衷是为 Vue.js 应用提供一套开箱即用的工具链，帮助开发者快速构建高性能、SEO 优化以及用户体验卓越的 Web 应用。 今天，Nuxt.js 已发展成为 Vue.js 生态中不可或缺的一部分，被广泛用于企业级和开源项目中。 核心特点1. 服务端渲染 (SSR)Nuxt.js 提供了简单且高效的服务端渲染功能。这不仅提升了应用的加载速度，还显著优化了 SEO 表现。 2. 静态站点生成 (SSG)通过 Nuxt.js 的 nuxt generate 功能，你可以轻松生成静态 HTML 文件，从而创建完全静态化的网站...
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog