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

工欲善其事，必先利其器。

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本…

最近做网站体验优化的时候突然发现一个好东西，pace.js(加载进度条插件)，gzip之后只有几kb， 简单好用，特地分享出来，也作为自己的一个学习总结。 pace.js是一个自动加载页面进度栏的小插件,它可以自动监视您的Ajax请求，事件循环滞后，文档就绪状态以及页面上的元素…

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必…

2018 年 12 月 16 号，Fusion 在 OSC 深圳源创会年终盛典上正式开源了， 这个在阿里内部跑了三年的产品，终于正式对外了！ 可能一些业界的同学已经在某些渠道听说过阿里的 Fusion Design 比如这篇 16 年就传得很火的《阿里最新神器－fusion d…

【前言】在Web页面中，流畅的过渡动效可以增加用户体验的舒适度，让用户认知过程更为自然，同时恰当的动效也能够引导用户关注重要的信息。在WeGame大屏模式需求场景中，笔者利用这个契机，在开发前期与视觉及动画设计同学沟通，设定好产品过渡动效及实现方式，给用户在体验中营造“沉浸式”…

如何让 UI 动画从单纯的良好变得更加出色呢？在这里我将举一些实例。只需要将动画进行一些微调，就可以让其效果更佳。 下面列出的交互效果显示了状态之间的连续性，共享元素之间的关系，以及如何让用户关注你想让他们关注的地方。 为了创建这些动画，我遵循了 Material Motion…

本文阿宝哥将给大家介绍十个 「“酷炫屌"」 的图像悬停效果，希望阿宝哥精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。 在日常工作中，如果小伙伴们也想实现图片悬停特效，阿宝哥推荐一个 Github 上的一个可扩展的…