作者：ChimezieEnyinnaya译者：前端小智来源：博客有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。在代码上。.........1.Lottie-Web/Bodymovingithub地址：https://github.com/airbnb/lot...从我最喜欢的repository开始。使用此库，可以将在Adob??eAfterEffects中创建的动画直接导出到您的网站。例子：2.Parallax.jsgithub:https://github.com/wagerfield...有了这个库，我们可以制作出漂亮的视差效果，可以通过鼠标移动来控制，还可以调整移动物体的速度.3.FlatSurfaceShader[FSS]github:https://github.com/wagerfield...FlatSurfaceShader是一种令人惊叹的3D模拟光照效果，可以配置为使用基于Canvas的2D上下文或SVG绘制三角形多边形数组。它还使用本机Float32Arrays来存储数字数据以进行高度优化的计算。您可以调整颜色参数以预览效果，并且可以导出图像。4、Hover.cssgithub：https://github.com/IanLunn/HoverHover.css是一套基于CSS3的鼠标悬停效果和动画，可以方便的应用到按钮、LOGO、图片等元素上。所有这些效果只需要一个标签，必要时使用前后伪元素。由于使用了CSS3过渡、过渡和动画，因此仅支持Chrome、Firefox和Safari等现代浏览器。5.Video.jsMarkersgithub:https://github.com/spchuang/v...Video.js是一个常用的网页嵌入视频播放器的JS库。Video.js自动检测浏览器是否支持HTML5在某些情况下，如果不支持HTML5，则会自动使用Flash播放器。使用此插件，您可以在您网站上存在的视频上放置必要的标记，以便您可以轻松切换到我们需要的时间码。6.MagicGridgithub:https://github.com/e-oj/Magic...这个库帮助我们创建一个自适应网格，在这里你不需要创建单独的@media样式。只需指定容器即可。7.Vue/ReactContentLoadergithub:https://github.com/egoist/vue...VueContentLoader是一个基于Vue.js的SVG占位符加载，可定制的SVG组件，用于创建占位符字符加载，例如Facebook加载卡片.VueContentLoader是react-content-loader的Vue实现。8.ReactImageGallerygithub:https://github.com/xiaolin/re...9.WebSlidesgithub:https://github.com/webslides/...WebSlides是一个开源的HTML幻灯片项目，可以帮助熟悉前端语言的开发者可以快速制作精美的幻灯片。页面中的每个都是一个独立的幻灯片，只需要少量的CSS代码装饰。10.SVG.jsgithub:https://github.com/svgdotjs/s...SVG.js是一个轻量级的JavaScript库，可以让你轻松操作SVG和定义动画。示例地址：https://jsfiddle.net/Fuzzy/f2...11。ReactMotiongithub：https://github.com/chenglou/r...ReactMotion是一个React弹性动画库，使用0-10个Animate弹性参数：import{Motion,spring}from'react-motion';//在你的渲染...{value=>{value.x}
}这个库解决了什么问题？对于95%的动画组件用例，我们不需要硬编码（硬编码配置）缓冲曲线和时间转换来重新排序。只需为您的UI设置刚度和阻尼系数，然后让物理的魔力来处理它。这样，您就完全不必担心中断动画之类的小问题。它还大大简化了API。案例：12.RELLAXgithub:https://github.com/dixonandmo...rellax.js是一款轻量级的纯JavaScript滚动视差效果插件。relax.js的压缩版本只有871字节。在手机等小屏幕设备中，插件会自动限制视差功能。13.Dynamics.jsgithub:https://github.com/michaelvil...dynamics.js是一个Javascript库，可以创建基于物理的CSS动画。14.mo.jsgithub:https://github.com/mojs/mojsMo.js是一个“简洁高效”的图形动画库，拥有流畅的动画效果和惊人的用户体验，在任何设备上，屏幕密度独立效果都很好，你可以绘制内置形状或者自定义形状，只要你喜欢，你也可以绘制多个动画，然后将它们连接在一起。更多详情请访问Mo.js官网15.Reveal.jsgithub:https://github.com/hakimel/re...Reveal.jsforPPT的好处是可以使用markdown语言直接写static文本，可以添加html语言支持的各种交互动画。然后直接用Pandoc转成PPT。缺点是在使用markdown时，对单个HTML元素的操作不够灵活。本指南将记录使用Reveal.js做PPT的一些经验和教训。为了简单起见，静态页面我们尽量使用Markdown，动画演示使用p5js。16.Animsitiongithub:https://github.com/blivesta/a...17.SVGMesh3dgithub:https://github.com/mattdesl/s...一个SVG字符串转换为3D三角网格的高级模块。最适合字体图标SVG等剪影。18.Zdoggithub:https://github.com/metafizzy/...zdog是一个圆形的、平面的、对设计者友好的伪3D引擎。通过这个库，可以在不知道几何或代数的情况下创建伪3D元素。创建几何体。.~最后，我是玩玩志。看完这篇文章，北京时间：2021/09/22中午：12:35。我去洗碗。下期见~我们无法实时知道编辑器可能存在的BUG。之后为了解决这些bug，我花了很多时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://dev.to/kerthin/18-ama...每周更新交流文章。可以微信搜索【大千世界】立即阅读，回复【福利】还有很多前端视频等着你，本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，欢迎关注星星。
