作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 1. 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。…

React-Native-Demo是基于 react-native 官方文档，把文档所列出的基础组件（简洁、易用、高效） 和 API 实现一遍，并以演示的形式呈现出来。 目的是为了直观的熟悉官方提供了哪些能力，使之更熟悉 react-native ，为开发做好充分的准备。 将持…

直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CS…

可以点击查看 在线演示，以及 完整代码。 首先，需要了解 CSS3 的 transform ，用 transform 进行元素的变换，这是实现的关键。 实际上，上面的写法可以算作 CSS 提供的语法糖。了解计算机图形学的同学可能知道，计算机完成图像变换实际上使用的实现是矩阵。 …

我们知道，在echarts3.0 中引入了炫酷的展示效果，但是我们发现控制这些炫酷样式的代码全部都在series或者其他标签里面，如果取消之后就变成了官方实例默认的样式。给个例子： 这个图例就是官方默认的颜色，很难看有木有。那么问题来了，我们实际应用中加载的元素是不确定的，不可…

今天在coding的时候，做了一个搜索框，也正是这个搜索框，让我和后台小伙伴直接由铁磁变为塑料兄弟。那到底发生啥了呢？其实很简单，其实很无奈，就是我用王者的手速把他的接口访问崩了！ 什么是防抖？短时间内多次触发同一个事件，只执行最后一次，或者只在开始时执行，中间不执行。举个栗子…

number-flip: Change number with flipping animation.

第一行对非IE浏览器生效，第二行是对IE浏览器生效（emmm...似乎浏览器就分为两种），本质上都是使用filter的grayscale属性，实现灰阶效果，灰阶是一种常用的图片滤镜。打开PS可以看到多种滤镜可选择： 而通过CSS的filter能够实现其中的一些滤镜效果，如灰阶，…

项目整体已经给出，那么我们就撸起袖子加油干吧。 上面我们提到了canvas的事情，所以呢，这就是制作弹幕的杀手锏了。我们利用canvas绘图来实现弹幕的功能 创建实例很简单，没有对象，只需要new一个就有了，哈哈。接下来，说回正事，我们赶紧完成上面代码中todo的部分，来完善C…