通过css3的transform transition可以实现平移,旋转,缩放,拉伸等效果
1.缩放
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
2.平移
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px ,0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
3旋转 deg是角度的单位
-webkit-transform: rotate(0);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
4复合效果
-webkit-transform: translate(0px,0px) scale(1) rotate(0);
-moz-transform: translate(0px,0px) scale(1) rotate(0);
-ms-transform: translate(0px,0px) scale(1)rotate(0) ;
-o-transform: translate(0px,0px) scale(1) rotate(0);
transform: translate(0px,0px) scale(1) rotate(0);
5.让它变化持续时间变慢便于观看 第一个参数表示全部属性,第二个表示持续时间,第三个表示非线性变化,还有一个开始时间,可以省略
-webkit-transition: all 3s ease ;
-moz-transition: all 3s ease ;
-ms-transition: all 3s ease ;
-o-transition: all 3s ease ;
transition: all 3s ease ;
.test:hover{
-webkit-transform: scale(2)rotate(180deg) translate(200px,200px);
-moz-transform: scale(2) rotate(180deg) translate(200px,200px);
-ms-transform: scale(2) rotate(180deg) translate(200px,200px);
-o-transform: scale(2) rotate(180deg) translate(200px,200px);
transform: scale(2) rotate(180deg) translate(200px,200px);
}
下面是本人做的一个简单的2D动画效果,大家可以参考<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
@keyframes go{
0%{
transform: translate(0,0) rotateZ(0deg);
}
25%{
transform: translate(500px,0) rotateZ(-1000deg);
}
50%{
transform: translate(500px,300px) rotateZ(-2000deg);
}
75%{
transform: translate(0,300px) rotateZ(-3000deg);
}
100%{
transform: translate(0,0) rotateZ(-4000deg);
}
}
.big{
margin: 0 auto;
margin-top: 200px;
width: 600px;
height: 400px;
border: 1px solid red;
}
.small{
margin: 0 auto;
width: 400px;
height: 200px;
border: 1px solid yellow;
}
.a{
width: 92px;
height: 92px;
border-left: 4px solid blue;
border-bottom: 4px solid red;
border-top: 4px solid orange;
border-right: 4px solid aqua;
background-image: -webkit-radial-gradient( 46px 46px, yellow 20%, red 60%, blue 20%); /*这一句是颜色渐变为了美观*/
border-radius: 50px;
animation: go 10s linear;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="big">
<div class="a"></div>
<div class="small"></div>
</div>
</body>
</html>
这样就可以看到有效果了,都写五行是为了做浏览器兼容问题,复合状态下改变顺序会改变效果.
希望对刚入门的新手有所帮助,本人也是刚入门,希望有错的地方大神多多指点