CSS3 新特性
~平时喜欢逛博客，看别人的学习总结和遇到的问题解决办法，恰好最近在做书签整理，翻到了之前一个前辈移动前端的总结，所以我就按他的总结模块对自己的知识进行了梳理，不过由于都是手写的，为了方便，下面的都是平时常用的。
首先，对于前端页面结构来说，总体由三个层组成：html结构层、css表现层、javascript行为层，他们相互独立而又相互依存。
由于IOS系统移动端坚决抵制FLASH等插件登陆其移动端浏览器，所以CSS3在移动端有了很大的用途，主要体现在形状和动画上。
下面结合我的学习总结（平时用得多的）分别举例说明：：：
1、圆角（ border-radius ）
四个角== border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius
eg:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3圆角效果</title> <style> div{ width:100px; height:100px; border:1px solid blue; -webkit-border-radius:5px; } </style> </head> <body> <div></div> </body> </html>
2、阴影（ box-shadow / text-shadow ）
eg:
<style> div{ width:150px; height:150px; background-color:#ccc; -webkit-box-shadow:2px 2px 20px #06c; } p{ text-shadow:10px 10px 16px #06c; } </style> <body> <div></div> <p>这个文本有阴影效果</p> </body>
3、背景图像
background-image 背景图像
background-size:[<length>|<percentage>|auto]{1,2}|cover|contain; 背景图像的大小（常用cover，保持图像宽高比，将图片缩放到正好完全覆盖所定义背景区域）
4、2D变形（ transform ）
（1）旋转 transform:rotate(45deg); （2）缩放 transform:scale(2); // 放大两倍 transform:scale(-2); // 翻转元素并缩放 transform:scale(0.5); // 缩小一半
（3）移动 transform:translate(40px); // 只有一个值时表示水平偏移，如要垂直偏移，要设第一个参数为0，再加上第二个参数（正值：右移/下移；负值：左移/上移）
（4）倾斜 transform:skew(30deg); // 只有一个值时表示相对于X轴倾斜（或者skewX(30deg)），如要相对于Y轴倾斜，要加上第二个参数（skew(30deg, 10deg)或者skewY(10deg)）
（5）变形 transform:matrix(1,0.4,0,1,0,0) // matrix()是一个矩阵函数，有6个参数（a,b,c,d,e,f）
5、3D动画（ transition 和 animations）
transition支持从一个属性值平滑过渡到另一个属性值；animations支持通过关键帧在页面上产生更复杂的动画效果
（1）transition是一个复合属性，可同时定义transition-property（过渡属性），transition-duration（过渡时间），transition-delay（过渡延迟时间），transition-function（过渡效果）以及它们的子属性值
eg1:
<style> #d{width: 300px;height: 200px;background-color: sandybrown;} /*way1*/ #d:hover{background-color: blueviolet; transition-property:background-color; /*定义过渡属性*/ transition-duration:2s; /*定义过渡时间*/ transition-delay:1s; /*定义过渡延迟时间*/ transition-function:ease-in-out; /*定义过渡效果*/ } /*way2*/ /* #d:hover{ background-color: blueviolet; transition: background-color 2s 1s ease-in-out; }*/ </style> <div id="d"></div>
eg2:
<style type="text/css"> .nvflim1{ width:245px; height:175px; position:absolute; z-index:17; margin-left:480px; margin-top:80px; overflow:hidden; background-color:#F00; opacity:1; -webkit-transition:all 0.2s ease-in;} .nvflim2{ width:245px; height:175px; position:absolute; z-index:17; margin-left:220px; margin-top:80px; overflow:hidden; background-color:#0f0; opacity:1; -webkit-transition:all 0.2s ease-in;} </style> <div class="nvflim1" id="animation"></div> <script type="text/javascript"> function NvflimAnimation(){ setTimeout(function(){ // $("#animation").removeClass().addClass("nvflim2"); document.getElementById("animation").removeAttribute("class"); document.getElementById("animation").setAttribute("class","nvflim2"); },1000) } window.addEventListener("load",NvflimAnimation,false) </script>
（2）animations也是一个复合属性，包含：animation-name（动画名称），animation-duration（动画时间），animation-function（动画播放方式），animation-delay（动画延迟时间），animation-iteration-count（动画播放次数），animation-direction（动画播放方向）以及它们的子属性值
<style> .d1{ margin: 0 auto; width: 400px; height: 300px; background: url("2.jpg")center no-repeat; transform-style:preserve-3d; /*way1*/ animation-name:r1; /*动画名*/ animation-duration:10s; /*动画时间*/ animation-timing-function:linear; /*动画播放方式*/ animation-iteration-count:infinite; /*动画播放次数*/ /* infinite 无限次 */ /*way2*/ /*animation:r1 10s linear infinite;*/ } @keyframes r1{ /*调用动画r1*/ 0%{transform:rotatey(0deg);} /*设置第一个关键帧是开始位置*/ 50%{transform:rotatey(180deg);} /*设置第二个关键帧是中间位置*/ 100%{transform:rotatey(360deg);} /*设置第三个关键帧是结束位置*/ } </style> <div class="d1"></div>
