之前已经说过，本人是即将毕业的学生。前几天的HTML5实训学到了很多有趣的东西，其中CSS3做的东西很棒。由于时间关系，老师并没有讲解多少，只是做了几个简单的案例。其中有利用transform实现文字或图像的旋转，缩放，倾斜，移动这四种类型的变形处理；有使用transition功能通过将元素的某个属性从一个属性在指定的时间内平滑过渡到另一个属性值来实现动画；还有animations通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
我自己还没有系统的学习CSS3，只是稍有了解。CSS3新增了很多美观的样式，不断丰富页面内容。我选择主攻前端正是因为喜欢将用户体验尽可能做到最佳，当然也少不了CSS3。今天先来分享一下两个使用CSS3做出的炫酷小动画吧，都是从老师那里学到的。
第一个先来大风车吧，说到大风车我第一时间想到了“大风车吱呀吱扭扭地转”这句词，嘿嘿。进入正题，首先将静态页面搭建起来，这个就比较简单啦。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大风车</title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
position: relative;
}
.wrap div{
width: 200px;
height: 200px;
position: absolute;
}
.box1{
background: linear-gradient(to top,#dc143c 50%,rgba(0,0,0,0) 50%);
top:100px;
border-radius: 0 0 100px 100px;
}
.box2{
background: linear-gradient(to bottom,#ff4500 50%,rgba(0,0,0,0) 50%);
top:100px;
right: 0;
border-radius: 100px 100px 0 0;
}
.box3{
background: linear-gradient(to right,#00ced1 50%,rgba(0,0,0,0) 50%);
left:100px;
border-radius:100px 0 0 100px;
}
.box4{
background: linear-gradient(to left,pink 50%,rgba(0,0,0,0) 50%);
left:100px;
bottom: 0;
border-radius:0 100px 100px 0;
}
.gunzi{
width: 10px;
height: 300px;
position: absolute;
top:208px;
left:204px;
background:black;
z-index: -1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="gunzi"></div>
</body>
</html>
先来看下效果，如下：
接下来在<style></style>标签中加入：
@keyframes rotate{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.wrap{
animation:rotate 2s linear infinite;
}
使用@keyframes规则定义关键帧创建动画。效果如下：
大风车到这里就结束啦，最后再来一个3D立方体。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{-webkit-perspective:1500px;
}
.div{
-webkit-transform-style:preserve-3d;
width:200px;height:200px;
margin:100px auto;
position:relative;
-webkit-transition:-webkit-transform 2s ease 0s;
}
p{margin:0;
padding:0;width:200px;
height:200px;position:absolute;
opacity:0.5;}
p:nth-of-type(1){background-color:#00b38b;
-webkit-transform:translateZ(100px); opacity:1;
}
p:nth-of-type(2){background-color:#ff4500;
-webkit-transform:rotateX(90deg) translateZ(100px);
}
p:nth-of-type(3){background-color:honeydew;-webkit-transform:rotateX(90deg) translateZ(-100px)}
p:nth-of-type(4){background-color:red;-webkit-transform:rotateY(90deg) translateZ(100px)}
p:nth-of-type(5){background-color:#00bfff;-webkit-transform:rotateY(90deg) translateZ(-100px)}
p:nth-of-type(6){background-color:#ff1493;-webkit-transform:rotateY(90deg) translateZ(-100px)}
.div:hover{
-webkit-transform:rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<div class="div">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
上面使用了perspective 属性定义 3D元素距视图的距离。完成之后的效果如下：
以上就是今天的CSS3小动画全部源代码以及效果，刚刚接触，纯属娱乐，不喜勿喷，欢迎大家提出意见~