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-07-03
自动仿真人类滚动脚本
周虽旧邦，其命维新。一一《诗经》 自动仿真人类滚动脚本：让你的网页浏览更“像人类”在前端开发、自动化测试或数据采集的过程中，我们经常会遇到“模拟人类操作”的需求。例如，自动滚动页面以加载惰性内容、触发懒加载图片，或者让自动化检测工具误以为是真人在浏览网页。传统的 window.scrollTo() 或 window.scrollBy() 方法虽然可以实现页面滚动，但往往过于机械，容易被反爬虫系统识别。 本文介绍一个简单易用、可持续运行的仿真人类自动滚动脚本，它通过“随机滚动步长+随机停顿”的方式，让页面滚动行为更贴近真实用户操作。 一、脚本源码解析123456789101112131415161718192021222324252627(function autoHumanScroll() { const minDelay = 5000; // 最小停顿5秒 const maxDelay = 10000; // 最大停顿10秒 const minStep = 20; // 最小滚动20px const maxStep = 80; // 最大滚动...
2023-08-18
aspect-ratio
物以稀为贵，情因老更慈。——白居易 分享一个css属性aspect-ratio 大家其实能看出来值2/1就是宽高比 这个属性在width和height只要有任意一个没有配的情况下就会生效，非常方便用于配置一些指定宽高比例的场景
2024-10-14
Apache-ShenYu动态扩缩容前端对接
能够隐藏自己的才能是一种很大的才能。——罗休夫柯 pr链接： https://github.com/apache/shenyu-dashboard/pull/489 see gif: 后端也包含了一个提交sql和优化代码的pr： [type:improve] Add dynamically scale admin page by VampireAchao · Pull Request #5706 · apache/shenyu · GitHub 菜单的： 12345INSERT INTO `resource` VALUES ('1844015648095666176', '1346776175553376256', 'SHENYU.MENU.SYSTEM.MANAGMENT.SCALE', '', '/system/scale', '', 1, 4, 'sliders', 0, 0, '', 1, ...
2021-06-19
集成wangEditor
寿命的缩短与思想的虚耗成正比。——达尔文 官方文档 wangEditor：Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费 html里集成wangEditor非常简单 1234567<div id="div1"></div><script src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script><script> var E = window.wangEditor; var editor = new E("#div1"); editor.create();</script> 只需要上方几行代码即可完成 如果我们需要获取富文本中的内容 使用editor.txt.html()即可
2022-03-10
react中什么情况下不能用index作为key
立志用功如种树然，方其根芽，犹未有干；及其有干，尚未有枝；枝而后叶，叶而后花。——王守仁 我们在React遍历渲染列表时会遇到这样一个报错： 意思是说，渲染list列表时必须给每个元素指定一个唯一的key 当然你可以选择忽略这个报错，但是为什么会提示这个报错呢？ 假设我们给key指定一个随机数，或者干脆不指定的话，会怎么样呢？ 官方文档给出了答案： 渲染列表时的逻辑以及问题 为了解决上述问题，React 引入了 key 属性。 也就是说，如果给key指定一个随机数，或者干脆不指定的话，会造成性能问题 这个时候，我们想到了用遍历时的元素下标作为key 但是官方文档明确告诉我们： 如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。可以看看 Robin Pokorny 的深度解析使用索引作为 key 的负面影响这一篇文章。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。 这里Robin Pokirny的文章中提到了，如果满足这三者，可以放心使用index作为...
2024-10-08
深入理解 JavaScript 异步
美丽的姿态胜过美丽的脸孔，美丽的行为胜过美丽的姿态。——爱默生 学习js异步可以看这个 https://github.com/wangfupeng1988/js-async-tutorial 2014年秋季写完了《深入理解javascript原型和闭包系列》，已经帮助过很多人走出了 js 原型、作用域、闭包的困惑，至今仍能经常受到好评的留言。 很早之前我就总结了JS三座大山这个概念（虽然没有到处宣扬），前两座（原型、作用域）已经基本讲明白，而第三座（异步）也应该做一个总结。 于是，2017年初春，我花费大约一周的业余时间来对 JS 异步做一个完整的总结，和各位同学共勉共进步！ 目录part1 基础部分 什么是异步 异步和 event-loop 事件绑定算不算异步？ part2 jQuery的解决方案 jQuery-1.5 之后的 ajax jQuery deferred jQuery promise part3 ES6-Promise Promise 加入 ES6 标准 Promise 在 ES6 中的具体应用 对标一下 Promise/A+ 规范 Pro...