边学习，边笔记。
全屏代码
<table style="position:absolute;left:0px;top:0px;width:100%;height:1500px;background:red;" border="0" cellpadding="0" cellspacing="0"><td><center><table border="0" cellpadding="0" cellspacing="0" style="width:1000px;height:1500px;background:#000;"><td>这里开始写代码，高1500px宽1000px请注意控制大小</td></table></td></table><p style="height:1400px;"></p>
直线：<p style="width:3px;height:200px;background:#000;"></p>
横线将宽与高的大小进行交换。
斜线：<p style="width:3px;height:200px;background:#000;transform:rotate(45deg);-webkit-transform:rotate(45deg);"></p>
圆：<STYLE>#ta{width:100px;height:100px;border-radius:50px;background:#000;}</STYLE><p id="ta"></p>
border-radius是让边框四角产生弧度，这里的50px正好是长宽的一半.
这里border-radius是简写属性,声明顺序是顺时针，从左上角开始.
<STYLE>#kxy{width:100px;height:100px;border-radius:50px;border:2px solid #000;}</STYLE><p id="kxy"></p>
【空心圆】将背景改成了边框声明即可
让动画保持突然终止时的状态，就要使用animation-play-state属性。
div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; }
目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。
实际运用中，代码必须写成下面的样子。
div:hover { -webkit-animation: 1s rainbow; animation: 1s rainbow; }
@-webkit-keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
keyframes关键字用来定义动画的各个状态，它的写法相当自由.
@keyframes rainbow { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen } }
0%可以用from代表，100%可以用to代表，因此上面的代码等同于下面的形式。
@keyframes rainbow { from { background: #c00 } 50% { background: orange } to { background: yellowgreen } }
div:hover { animation: 1s rainbow; }
CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。
上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，还需要用keyframes关键字，定义rainbow效果。
@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。
默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
div:hover { animation: 1s rainbow infinite; }
也可以指定动画具体播放的次数，比如3次。
div:hover { animation: 1s rainbow 3; }
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
div:hover { animation: 1s rainbow forwards; }
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
同transition一样，animation也是一个简写形式。
div:hover { animation: 1s 1s rainbow linear 3 forwards normal; }
div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; }
img{ height:15px; width:15px; } img:hover{ height: 450px; width: 450px; }
当鼠标放置于缩略图之上，缩略图会迅速变大。
img{ transition: 1s; }
上面代码指定，图片放大的过程需要1秒.
img{ transition: 1s height; }
只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现
img{ transition: 1s height, 1s 1s width; }
上面代码指定，width在1秒之后，再开始变化，也就是延迟（delay）1秒
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。
img{ transition: 1s ease; }
transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式
最后那个cubic-bezier，可以使用工具网站来定制。http://cubic-bezier.com/#.17,.67,.83,.67
img{ transition: 1s 1s height ease; } [简写]
img{ transition-property: height; transition-duration: 1s; transition-delay: 1s; transition-timing-function: ease; }[全拼]
transition的局限：
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
@keyframes dx1{0%{width:100px;}100%{width:200px;}}
keyframes关键帧，这是动画生成的基础，浏览器通过在人为设定好的关键帧之间达成平滑过渡以完成动画效果。
0%是动画开始的时候，此时限定某元素的宽度为100px
100%时即动画完成时，限定宽度为200px
<style>a:hover{border-bottom:solid 1px #000000;}</style>
<a href=”” target=_blank>链接</a>
鼠标悬停在链接上，出现下划线
<font style="color:rgba(0,0,0,1);font-size:100px;line-height:100%;">颜色改变</font>
rgba(255,0,0,0.4) rgba中最后的a是alpha透明度，只接受0~1
<table><td style="font-size:16px;line-height:100%;">你好</td></table>
<table>表格 <td>表格内容
