Lottie库Web端使用调研 Lottie Docs 通常复杂动画怎么处理？ 使用GIF： 不足： 文件占用空间大 动画显示效果不佳 会出现失真、模糊、出现锯齿情况 掉帧严重 需要适配分辨率 And

花个5分钟，给你的视频加点字幕吧，中文的，英文的，彩色的，都可以。抓住时间，位置，样式三要素，一切都变得简单起来。

最近一直在使用 css-doodle 实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。后续几篇文章可能都会与之有关。 当…

为了保证的可读性，本文采用意译而非直译。 超过46K的星星，这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，让咱们在设备和浏览器之间创建丰富的交互体验。该…

一声梧叶一声秋，一点芭蕉一点愁，三更归梦三更后。 大概是因为入秋的缘故，最近的感慨比较多。 很多的碎碎念都用都用 HTML 跟 CSS 来记录在我的codepen https://codepen.io/krischan77 至上，眼见积累到了一些了，就选出几个来与大家一同分享。…

不管什么原因，维恩图中的合理性观点“没人这么做，但这是可能的”是让我兴奋的点。所以我决定花费一些时间研究在地址栏中图形字符的可能性，特别是通过 JavaScript 给这些字符加上动画。 首先，确保你页面的 JavaScript 代码是 UTF-8 编码，否则无法在你的代码中显…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…