Nearth===>WEB前端--第4课/html5/2D动画
原创
©著作权归作者所有：来自51CTO博客作者西南第一深情李登门的原创作品，请联系作者获取转载授权，否则将追究法律责任
2D动画包括：translate,roate,scale,skew。（位移，旋转，伸缩，倾斜）
如何使用，自己去查看菜鸟教程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nearth</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
height:200px;
width:200px;
background-color:pink;
border:2px solid red;
transition:all 0.3s;
}
div:hover{
transform:translatey(100px);
}
#d1{
height:200px;
width:200px;
background-color:pink;
border:2px solid red;
transition:all 0.3s;
position:absolute;
top:50%;
left:50%;
}
#d1:hover{
transform:translate(-50%,-50%);
}
#d2{
height:200px;
width:200px;
background-color:pink;
border:2px solid red;
transition:all 0.3s;
position:absolute;
top:50%;
left:50%;
}
#d2:active{
transform:translate(350px,350px);
}
#d3{
height:200px;
width:200px;
background-color:pink;
border:2px solid red;
transition:all 0.3s;
position:absolute;
top:50%;
left:50%;
}
#d3:hover{
transform:rotate(720deg);
}
#d4{
height:200px;
width:200px;
background-color:pink;
border:2px solid red;
transition:all 0.3s;
}
#d4:hover{
transform:scaley(0.5);
}
#d5{
height:200px;
width:200px;
background-color:pink;
border:2px solid red;
transition:all 2s;
position:relative;
left:50px;
top:20px;
}
#d5:hover{
transform:skewx(30deg,30deg);
}
</style>
</head>
<body>
<div id="">位移1</div>
<hr >
<div id="d1">位移2</div>
<hr >
<div id="d2">位移3</div>
<hr >
<div id="d3">旋转</div>
<hr >
<div id="d4">缩放</div>
<hr >
<div id="d5">缩放</div>
</body>
</html>
加油哒鸭，小主人·································
