CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…

每每提及色彩，我总会想起苏轼的一年好景君须记，正是橙黄橘绿时，白居易的日出江花红胜火，春来江水绿如蓝，朱熹的等闲识得东风面，万紫千红总是春。 也许世界本无色彩。 古人曾用诗词赋予了这个世界色彩，而如今是物理的光学让我们认识到了色彩。那么本文将带你揭秘CSS中的色彩。 但实际上，…

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

正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。 如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。 模糊滤镜…

1. XMLHttpRequest对象 现代浏览器，最开始与服务器交换数据，都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。 在后台向服务器发送数据。 使用起来也比较繁琐，需要设置很多值。 早期的IE浏览器有自己…

看完之后，你会发现，原来只使用 HTML，就能实现这么多的效果。 拨号链接与邮箱发送（ mailto）链接书写类似，不过使用的是 tel。 删除文本使用 <del>...</del>，插入文本使用 <ins>...</ins>。 为标签添加 contenteditable 属性…

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

你该知道的字体 font-family。 该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久，如今的 Web 字体又有了一些新的东西，遂有此文。 正文从这里开始。 作为前端的一个习惯，浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下。看了一下一些比较出名的网站…