14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋
transform旋转
rotate旋转 scale放大 translate偏移量 skew倾斜度
transform:rotate(40deg) scale(1.2) translate(40px) skew(30deg);
transition 平滑过渡
#d1{width:100px;height:100px;background-color:red;}
#d1:hover{background:blue;transition:background-color 1s ease-in;}transition:background-color ease-in 1s;背景由红--蓝过渡
<div id="d1"></div>
transition: all ease-in 1s; all代表所有
animation 动画
#d1{width:100px;height:100px;background-color:red;animation:haha 20s infinite linear;}/*动画名称,经历时间,播放次数(为infinite则一直播放),播放方式
*/ @keyframes haha{ 0%{transform:rotatex(0deg);} 50%{transform:rotatex(180deg)} 100%{transform:rotatex(360deg)} }
gradient渐变
开始位置,结束位置,开始颜色,结束颜色,色标(色标位置,色标颜色,可以有多个色标,色标即颜色的过渡点)
#d1{width:100px;height:100px;border:1px solid red;background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));}
径向渐变,内圆圆心位置,内圆半径,外圆圆心半径,外圆半径,开始颜色,结束颜色,色标
background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));
15.响应式布局
大于900 600—900 小于600
头部左边中间右边
16.css兼容性
参考:http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
<iframe src="xx.html" frameborder="0" width='200' height='200'></iframe>