css 动画和响应式布局和兼容性

14.动画 -moz-：火狐， -ms-：IE，-webkit-：谷歌，-o-：欧朋

transform旋转

rotate旋转 scale放大 translate偏移量 skew倾斜度

css 动画和响应式布局和兼容性

transform:rotate(40deg) scale(1.2) translate(40px) skew(30deg);
<div id="d1"></div>

transition 平滑过渡

css 动画和响应式布局和兼容性

#d1{width:100px;height:100px;background-color:red;}
#d1:hover{background:blue;transition:background-color 1s ease-in;}

transition:background-color ease-in 1s;背景由红--蓝过渡

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)} }
<div id="d1"></div>

gradient渐变

css 动画和响应式布局和兼容性

开始位置，结束位置，开始颜色，结束颜色，色标（色标位置，色标颜色，可以有多个色标，色标即颜色的过渡点）

#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));}

css 动画和响应式布局和兼容性

径向渐变，内圆圆心位置，内圆半径，外圆圆心半径，外圆半径，开始颜色，结束颜色，色标

background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));

15.响应式布局

　 css 动画和响应式布局和兼容性

大于900 600—900 小于600

<style type="text/css">

*{padding:0px;margin:0;}

#header{height:100px;border:solid 1px red;margin:0 auto;}

#main{margin:10px auto;height:400px;}

#footer{margin:0 auto;height:100px;border:1px solid red;}

@media screen and (min-width:900px){

	#header,#footer{width:800px;}

	#main{width:800px;height:400px;}

	#main-left{width:200px;height:400px;border:1px solid red;float:left;}

	#main-center{width:394px;height:400px;border:1px solid red;float:left;}

	#main-right{width:200px;height:400px;border:1px solid red;float:left;}

	}

@media screen and (min-width:600px) and (max-width:900px){

	#header,#footer{width:600px;}

	#main{width:600px;height:400px;}

	#main-left{width:200px;height:400px;border:1px solid red;float:left;}

	#main-center{width:394px;height:400px;border:1px solid red;float:left;}

	#main-right{display:none;}

	}

@media screen and (max-width:600px){
        #header,#footer{width:300px;}

	#main{width:300px;height:400px;}

	#main-left{display:none;}

	#main-center{width:300px;height:400px;border:1px solid red;float:left;}

	#main-right{display:none;}

	}

</style>

<div id="header">头部</div>

<div id="main">

   <div id="main-left">左边</div>

   <div id="main-center">中间</div>

   <div id="main-right">右边</div>

</div>

<div id="footer">底部</div>

16.css兼容性

参考：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html

秒客网

css 动画和响应式布局和兼容性

相关文章

css 动画 和 响应式布局和兼容性

相关文章

css 动画和响应式布局和兼容性