【转】移动前端工作的那些事---前端制作篇之css3简要介绍
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之css3简要介绍
再谈CSS3之前，有必要先说一下webapp的页面结构。页面结构总体说来是由三个层组成。它们分别是：html结构层、css表现层和javascript行为层。三个层相互独立而又相互依存。理顺了三者之间的关系。对于前端制作大有益处。
css表现层起的主要作用是修饰HTML结构层的外观。外观包括：位置、颜色、大小等等。延伸到css3时又增加了许多新的功能。如形状、动画等等。
由于IOS系统移动端坚决抵制FLASH等插件登陆其移动端浏览器。所以CSS3在移动端有了很大的用途。它的用途也是主要体现在形状和动画上。现一一举例说明。
1、举个简单的例子来说明CSS3支持的形状变化：
请看效果图
以前这样的效果只能使用绘图软件来完成，现在使用CSS3就可以轻松的完成了。以下的是该效果图的CSS3代码：
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3</title> <style type="text/css"> .btn{ width:100px; height:100px; -webkit-border-radius:5px; background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#d93600), to(#d93600), color-stop(0.5,#ffd24d)); -webkit-box-shadow:2px 2px 5px #333333; } </style> </head> <body> <div class="btn"></div> </body> </html>
移动端浏览器webkit渲染引擎可以很好的支持CSS3.从而达到很好的显示效果。在这个样式中我们看到使用了-webkit-border-radius（圆角），-webkit-gradient（渐变），-webkit-box-shadow（阴影）等效果。css3还可以做到一些形变的效果。比如旋转、斜切、滤镜等等。这里就不一一举例说明了。关于CSS3教程。大家可以百度之。随着文章的深入，我会在以后的制作中慢慢介绍一些CSS3的其他一些特性和用法。这里就先不深入讨论了。
2、CSS3在移动端动画方面的应用：
上文提到，由于现在的移动端浏览器基本上抛弃了FLASH。所以动画一般都是以CSS3动画或是基于html5标准的其他动画比如canvas\svg等等进行替代。这里只讨论CSS3动画。举个简单的例子进行说明：
@-webkit-keyframes gaoguang { 0% { margin-left:-120px; position:absolute; margin-top:-20px; } 30% { margin-left:100px; position:absolute; margin-top:-20px;} 60% { margin-left:100px; position:absolute; margin-top:-20px;} 90% { margin-left:100px; position:absolute; margin-top:-20px;} 100% { margin-left:100px; position:absolute; margin-top:-20px;} } .gaoguang { -webkit-animation-name: gaoguang; -webkit-animation-delay: 2.5s; -webkit-animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; width:88px; height:101px; margin-left:-120px; position:absolute; background-image:url(../images/guang.png); }
以上的样式使用的是CSS3中的关键帧动画。通过关键帧动画，我们可以设置每个帧的动画状态。并且对它进行设置：
-webkit-animation-name: gaoguang;--调用关键帧的名称
-webkit-animation-delay: 2.5s;--延时播放的时间
-webkit-animation-duration: 4s;--播放时长
-webkit-animation-timing-function: ease-in-out;--播放时间轴的方式
-webkit-animation-iteration-count: infinite;--循环播放
另外还有一种CSS3动画，利用的是-webkit-transition的方式。在互联网中一般都是应用于在鼠标悬停和离开等情况下。在移动端稍加修改就可以形成动画。而且这种形式的动画。相比于关键帧动画。兼容性更好。缺点是不如关键帧动画制作简单。举个简单的例子：
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3</title> <script type="text/javascript" src="jquery1.6min.js"></script> <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:0; -webkit-transition:all 0.2s ease-in;} .nvflim2{ width:245px; height:175px; position:absolute; z-index:17; margin-left:221px; margin-top:80px; overflow:hidden; background-color:#0f0; opacity:1; -webkit-transition:all 0.2s ease-in;} </style> </head> <body> <div class="nvflim1" id="animation"></div> <script type="text/javascript"> function NvflimAnimation(){ setTimeout(function(){ $("#animation").removeClass().addClass("nvflim2"); },1000) } window.addEventListener("load",NvflimAnimation,false) </script> </body> </html>
这种在互联网前端鼠标悬停的样式切换，应用到移动端来的话。需要使用定时器setTimeout来进行衔接。通过一定的时间来进行切换css样式，从而产生动画。本例采用的是jquery写法写的一个简单的程序。通过加载完成后执行NvflimAnimation方法来实现动画。
-webkit-transition:all 0.2s ease-in;这里指的就是使用transition的方式进行动画切换。0.2S代表的就是动画播放的时间。后面则也是动画播放时间轴的方式，采用的是先慢后快的方式。
以上两种方式是CSS3在移动端的主要动画应用方式。还有一些其他的应用方法，大同小异，这里就不详细介绍了。
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之css3简要介绍
