（绿色通道）我们结合jQuery深入使用transition属性达到页面切换效果。
这次，按照类比归纳，就要深入使用animation属性了。
就拿加载（Loading）动画为例，开心一下～
不得不说，自从蒂姆·伯纳斯·李创建HTML以来，Loading元素的诞生完全是出于心理学！
用户看到这个根本不符合实际情况的加载小框后，居然神奇的治好了“焦虑”心情！
这就叫做真正
“从用户体验设计产品的初（粗）心”
话不多说，直接进入正题！
没法直接制作一个Loading元素，必须要分解。
先制作一个不停旋转的半圈
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
title进度条/title
styletype="text/css"
body{
background:#;
margin:px;
}
.load{
text-indent:-px;
position:relative;
width:px;
height:px;
box-shadow:inset16px#6FE;
border-radius:50%;
}
/style
/head
body
divclass="load"Loading/div
/body
/html
效果图：
text-indent隐藏文字，纯属为了和（绿色通道）中方法形成对比～
利用box-shadow生成样蓝色圆圈，此外也不会打乱div内部元素定义。
如果要使用border来生成的话，会引起内部元素推移。
最后border-radius设置为50%，来使上面生成的box-shadow默认形状方形为圆形。
一个整圆，怎么转。。。
得想个办法，取掉一半的区域。咋办呢？
可以用一个神奇的“魔术”，达到障眼需求。
.load::before{
position:absolute;
content:;
width:px;
height:px;
background:#FF88C2;
left:px;
}
效果图：
为div创建一个before伪元素，然后生成一个矩形，位置正好是圆形的一半。
这不就遮住了～
然后修改为圆形，跟背景色一样，不就是变成半圆咯～
如果border-radius不太熟悉，请看（