9-12
一、框架集
创建一个框架集<frameset></frameset>,与<body>不能同时出现
<frameset rows=”30%,*,50%”>(row/cols让标签横向、纵向摆放)
<frame src=”xx.html”/>
<frame src=”xx.html”/>
<frame src=”xx.html”/>
</frameset>
二、ie6png的修复
1.在<body>中添加<script></script>
2.<script type=”text/javascript” src=”js/DD_belatedPNG_0.0.8a-min.js”></script>
<script type=”text/javascript”>DD_belatedPNG.fix(“xx,xx”)</script>
三、条件Hack(使代码在固定的浏览器IE10以下版本显示)
取值：
四、属性Hack （尽量少用）
_：选择IE6及以下
*：选择IE7及以下
\9:选择IE6+ （写在样式后边）
\0：选择IE8+ （写在样式后边）
五、选择符
*空格html空格 IE6及以下版本
六、CSS3过度动画
在哪产生动画、动画的时间、运动曲线、延迟时间transition:all 500ms ease;
七、运动曲线
匀速：Transition: all 1s linear
开始和结束慢，中间加速：Transition: all 1s ease
开始慢速，结尾突然停止：Transition: all 1s ease-in
突然开始，结束慢：Transition: all 1s ease-out
开始和结束时慢速：Transition: all 1s ease-in-out
贝塞尔曲线：
匀速：transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);
超出再缩回的弹性效果：transition: all 1s cubic-bezier(0.474, -0.485, 0.460,1.435);
八、变形
位移：transform:translate(50px,50px)
沿Z轴旋转360度：transform:rotate（360deg）
缩放：transform:scale（0.5,0.2）
斜切：transform:skew(0,45deg)
九、旋转
1.旋转方向判断：
a.X轴向右、Y轴向下、Z轴向屏幕外
b.让轴向对着自己，顺时针方向就是轴向的旋转方向
2.设置盒子3D空间显示:
Transform-style:preserve-3d;
设置透视距离、三维旋转的初始角度：
transform:perspective(800px) rotateY(0dg);
设置盒子的背面是否可见：
backface-visibility:hidden;
3.默认沿Z轴旋转
transform:rotate（45deg）;
perspective设置透视距离，经验数值800比较符合人演的透视效果
transform:perspctive(800px) rotateX(45deg)
4.设置变形的中心点
Transform-origin:left center;
十、动画
动画主要是给图片设置动画的名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态。
infinite不限次数
alternate动画结束后返回，返回也算次数
Animation-fill-mode动画前后的状态
forwarde动画完成保持在最后一帧
backwards在延时时间内。在动画显示之前，应用from开始属性值
both向前和向后填充模式都被应用
动画暂停：animation-play-state:paused;
动画运行:animation-play-state:running
定义一个动画，名称为moving，从初始状态到结束状态：
@keyframes moving{
from{width:200px;}
To{width:500px;}}
