您的位置：首页 > Web前端 > CSS

【转】移动前端工作的那些事---前端制作篇之css3简要介绍

2013-02-26 14:01 483 查看

首先感谢原作者：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简要介绍

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航