css实现动画功能
在CSS中动画功能其实可以说是很强大的，在网页中加载速度很快，他的功能特效可以一千变万化，做不到只有想不到的，当然前提是你要掌握在CSS3上面的各种标签，今天带来了我在课程练习中的动画的3D动态旋转。代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.bk{
border: 1px solid blue;
width: 1300px;
height: 800px;
}
.dy1{
width: 410px;
height: 450px;
margin-left:450px;
margin-top: 40px;
position: absolute;
background-image: url("image/beij1.png");
}
.dy2{
width: 410px;
height: 450px;
margin-left:450px;
margin-top: 40px;
position: absolute;
background-image: url("image/beij2.png");
}
.dy3{
width: 410px;
height: 450px;
margin-left:450px;
margin-top: 40px;
position: absolute;
background-image: url("image/beij3.png");
}
@keyframes z1
{
from{transform: scale(0.5, 0.5);
}
to {transform: scale(1, 1);
}
}
@keyframes z2
{
from{transform: scale(0.5, 0.5);
}
to {transform: scale(1, 1);
}
}
@keyframes z3
{
from{transform: scale(0.5, 0.5);
}
to {transform: scale(1, 1);
}
}
@keyframes z1-1
{
0%{margin-left:450px ;z-index: 1; }
14.2%{margin-left: 150px ;z-index: 1;}
28.4%{margin-left: 450px;z-index: 3;}
36.6%{margin-left: 450px;z-index: 3;}
48.8%{margin-left: 450px;z-index: 3;}
61%{margin-left: 750px;z-index: 2;}
73.2%{margin-left: 750px;z-index: 2;}
85.4%{margin-left: 750px;z-index: 2;}
100%{margin-left: 150px;z-index: 1;}
}
@keyframes z2-1
{
0%{margin-left:450px ;z-index: 3;}
14.2%{margin-left: 450px;z-index: 3;}
28.4%{margin-left: 750px;z-index: 2;}
36.6%{margin-left: 750px;z-index: 3;}
48.8%{margin-left: 750px;z-index: 2;}
61%{margin-left: 150px;z-index: 1;}
73.2%{margin-left: 150px;z-index: 1;}
85.4%{margin-left: 150px;z-index: 1;}
100%{margin-left: 450px;z-index: 3;}
}
@keyframes z3-1
{
0%{margin-left:450px ;z-index: 2;}
14.2%{margin-left: 750px;z-index: 2;}
28.4%{margin-left: 150px;z-index: 1;}
36.6%{margin-left: 150px;z-index: 1;}
48.8%{margin-left: 150px;z-index: 1;}
61%{margin-left: 450px;z-index: 3;}
73.2%{margin-left: 450px;z-index: 3;}
85.4%{margin-left: 450px;z-index: 3;}
100%{margin-left: 750px;z-index: 2;}
}
.dy1{
animation-name:z1,z1-1;
animation-duration:2s,10s;
animation-iteration-count:1,infinite;
}
.dy2{
animation-name:z2,z2-1;
animation-duration:2s,10s;
animation-iteration-count:1,infinite;
}
.dy3{
animation-name:z3,z3-1;
animation-duration:2s,10s;
animation-fill-mode: forwards;
animation-iteration-count:1,infinite;
}
</style>
</head>
<body>
<div class="bk">
<div class="dy1"></div>
<div class="dy2"></div>
<div class="dy3"></div>
</div>
</body>
</html>
老实说的这个动画并不是特别成功。因为旋转的方向逆时针旋转了，所以看起来有点部自然，。。
在做这的只要注意选择的方向，还有几个DIV我成层叠顺序这样才会显现出来的图片不会被别的图片所掩盖，，并且控制好时间，转换的速度，这些都是要注意的。，。，静态效果展示如下：
