从英文单词和汉字说起

世有万物，人类为了区分，给万物冠以不同的名称。英文单词由26个字母组成，对于天空，人们用字母s，k，y表示，即：sky；对于猫用c，a，t，表示，即cat；对于狗用d,o,t表示，即：dog。

这些名字都是随意的，没有什么原因说明为什么不把猫称为狗或不把狗称为猫。因此可以说英语词汇就是一种用26个符号(字母)进行的编码。
刚开始可以用几个字母，很短的单词来命名事物。随着已经约定事物的单词越来越多，后期事物的单词也越来越长。估计这也是很多自然事物的单词比较短，而一些近现代词汇比较长的原因吧。
汉字和英文单词有些不同。汉字最初是象形文字。通过模拟物体的形状来表示某一类物品。

随着不断的模拟，又从这些最初的象形文字归纳提炼出“点”、“横”、“竖”、“撇”、“捺”等笔画。然后再利用这些笔画进行组合，创立出不同的文字，用这些文字标记不同的物品。所以，也可以说汉字也是一种编码，甚至要比英文单词更加复杂，能够创立更多的组合。
比如下面表示太阳的“日”字。

沿环形路径转动的动画

今天利用CSS实现一种沿着环形路径转动的动画。为了便于演示，我们让一个头像图片沿着环形路径转动。
首先是一个img标签，用来保存头像图片，外面嵌套一个div用来设置背景。

<div class="path">
    <img src="test.jpg" class="avatar">
</div>

逐帧动画

在一些场景中，比如页面的加载提示，只使用过渡很难实现预期的效果。在这种情况下，我们可以使用基于图片的逐帧动画来解决。
提到基于图片的逐帧动画首先想到的就是GIF动画。GIF动画在大多数场景下都能满足我们的需求，但是GIF也有一些不足：

• GIF不具备Alpha透明的特征。但是对于页面的加载提示来说，一般都是半透明的。
• 低灵活性！我们无法在CSS层面修改动画的某些参数， 比如动画的持续时间、循环次数、是否暂停等。GIF一但生成，这些参数就固定在文件中，如果想要修改就只能重新生成一个GIF文件。

这个时候，可以利用下面这种方式作为补充，我们写一个半透明加载提示的小例子。

弹跳动画

在现实世界里，物体的移动往往不是匀速的。因此，给动画和过渡加上缓动效果会使界面显得更加真实。
回弹是一种常用的缓动效果，对回弹的过程进行分析会发现，回弹就是当一个过渡达到最终值时，往回倒一点，然后再次回到最终值，如此往复一次或者多次，并逐渐收敛。最终稳定在终值。
回弹往往会用在有尺寸变化的元素上，比如对于页面弹出框，先放大再缩小。下面就利用回弹模拟一个下落的弹性小球。

HTML：

<div class="ball_bg">
    <div class="ball ball-a"></div>
</div>

水平居中

行内元素

对于<span> img <input>等行内元素，只需要给父元素设置text-align: center

定宽块级元素

对于div p 等块级元素，如果是定宽，只需要给该元素设置左右margin为auto

不定宽块级元素

• 方法一：改变块级元素display为inline或者inline-block，然后设置父元素text-align为center