首先css3中能实现动画的功能的主要有transition(一个属性值平滑的过渡到另一个属性值)和animation(通过关键帧的技术在网页上产生更加复杂的效果)两种属性。
在想产生动画效果的元素内添加相应的样式，这个样式的格式如下：
transition:<过渡属性名称><过度时间><过渡的模式>
过渡的模式就有以下这么几种：
ease 缓慢开始，缓慢结束，中间速度会快些。(如果不定义过渡的模式这个就是默认的模式)
linear 匀速
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始，缓慢结束
因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，以下的例子就以谷歌里用的-webkit-transition为例。
例：-webkit-transition:color 1s linear;
也可以这么分开写：
过渡的属性赋值给：-webkit-transition-property:color;
过渡的时间赋值给：-webkit-transition-duration:1s;
过渡的模式赋值给：-webkit-transition-timing-function:linear;
当你想对多个属性都用到动画效果的时候，就可以这么写：
-webkit-transition:<属性1><时间1>,<属性2><时间2>,...
或者分成两条语句：-webkit-transition:<属性1><时间1>；
-webkit-transition:<属性2><时间2>；
自己先来尝试的做一下简单的动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
height:200px;
width:200px;
background-color:#ff0000;
margin:0 auto;
-webkit-transition:background-color 5s;
}
#div1:hover{
background-color:#000000;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html> 以下代码感受一下五种不同过渡模式的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.lala{
height:40px;
width:40px;
background-color:#ff0000;
}
.lala:hover{
width:300px;
}
#div1{
-webkit-transition:width 5s linear;
}
#div2{
-webkit-transition:width 5s ease;
}
#div3{
-webkit-transition:width 5s ease-in;
}
#div4{
-webkit-transition:width 5s ease-out;
}
#div5{
-webkit-transition:width 5s ease-in-out;
}
</style>
</head>
<body>
<div id="haha">
<p>linear(匀速)</p>
<div class="lala" id="div1"></div>
<p>ease(缓慢开始，缓慢结束,中间速度会快些）</p>
<div class="lala" id="div2"></div>
<p>ease-in(缓慢开始)</p>
<div class="lala" id="div3"></div>
<p>ease-out(缓慢结束)</p>
<div class="lala" id="div4"></div>
<p>ease-in-out(缓慢开始，缓慢结束)</p>
<div class="lala" id="div5"></div>
</div>
</body>
</html> 简单的动画效果会了之后，但由于浏览器是一个平面，所以我们要开始搭建一个3D场景。
就相当于透过浏览器这个窗口来观察三维世界。为此我们要引入以下两个属性：
-webkit-perspective:800; (浏览器将会距离我们观察的三维物体有800个像素那么远)
-webkit-perspective-origin:50% 50%（还存在一个观察视点的问题，相当于一个x轴，一个y轴，50% 50%就相当于我们从整个浏览器的正中央进行观察这个三维世界）
三维世界的z轴的正方向，就是从屏幕冲向我们的这个方向，以一个正方形为例左上顶点就是原点，向下是y轴向右是x轴。
经过设置之后此时浏览器中的物体已经变成三维的了。但是如果不进行任何设置的话，那就跟二维的看起来是一样的，
所以我们要引入一个新的属性 transform 来对这些元素进行调整，来展现出他们的三维效果。
有两种transform的方式对三维空间的物体进行操作
translate:平移操作（位移操作）单位是像素
translateX(x px)
translateY(y px)
translateZ(z px)
rotate:旋转操作 单位是角度
rotateX(x deg)
rotateY(y deg)
rotateZ(z deg)
由于transform属性同样适用与2D，所以我们要告诉浏览器，我们现在用的这个transform去调整元素是在三维空间里作调整的话
我们还要写一句：-webkit-transform-style:-webkit-preserve-3d;
例：如果想对一个div块元素的transform属性调整，使其对观察者而言，右边沿向屏幕内旋转45度相应的CSS属性应该如何设置？
<style>
#div1{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
}
#block{
width:200px;
height:200px;
background-color:#ff0000;
margin:0 auto;
-webkit-transform:rotateY(45deg);
}
</style>
<body>
<div id="div1">
<div id="block">
</div>
</div>
</body>
旋转中心是可以改变的：
对于x轴可以赋予left center right三个值
对于y轴可以赋予top center bottom这三个值
对于z轴可以赋予length px(作为一个长度值)
一个3D的小例子：
<style>
#my3dspace{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
overflow:hidden;
}
#pagegroup{
width:400px;
height:400px;
margin:0 auto;
-webkit-transform-style:preserve-3d;
position: relative;
}
.page{
width:360px;
height:360px;
padding:20px;
background-color: black;
color:white;
font-weight:bold;
font-size:360px;
line-height:360px;
text-align:center;
position:absolute;
}
#page1{
-webkit-transform-origin:bottom;
-webkit-transition: -webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: rotateX(90deg);
}
#op{
text-align:center;
margin: 40px auto;
}
</style>
<script type="text/javascript">
var curIndex = 1;<!--这个变量是当前屏幕所显示的页面->
function next(){
if( curIndex == 6 )
return;
var curPage = document.getElementById("page"+curIndex);;<!--当前屏幕所显示的页面->
curPage.style.webkitTransform = "rotateX(-90deg)";<!--调用css的属性：obj.style.margin,有下划线的则下划线后面的大写->
curIndex ++;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.webkitTransform = "rotateX(0deg)";
}
function prev(){
if( curIndex == 1 )
return;
var curPage = document.getElementById("page"+curIndex);
curPage.style.webkitTransform = "rotateX(90deg)";
curIndex --;<!--获得前一个页面的值->
var prevPage = document.getElementById("page"+curIndex);
prevPage.style.webkitTransform = "rotateX(0deg)";
}
</script>
<body>
<div id="my3dspace">
<div id="pagegroup">
<div class="page" id="page1">1</div>
<div class="page" id="page2">2</div>
<div class="page" id="page3">3</div>
<div class="page" id="page4">4</div>
<div class="page" id="page5">5</div>
<div class="page" id="page6">6</div>
</div>
</div>
<div id="op">
<a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a>
</div>
</body>
3381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
