标签：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>css3 transform transition animation 练习</title>
<style type="text/css">
body {
padding: 10px 50px;
}
div {
margin: 50px auto;
width: 100px;
height: 100px;
background: red;
-webkit-transition: -webkit-transform 2s; //过渡
}
.test1:hover {
-webkit-transform: rotate(45deg); //旋转
}
.test2:hover {
-webkit-transform: translate(10px, 10px); //位移
}
.test3:hover {
-webkit-transform: scale(1.5); //缩放
}
.test4:hover {
-webkit-transform: skew(10deg, 10deg); //扭曲
}
.test5 {
background: blue;
position: absolute;
left: 0;
top: 0;
-webkit-animation: move 5s infinite linear; //动画
}
@-webkit-keyframes move { //关键帧
0% {
left: 0;
top: 0;
}
25% {
left: 200px;
top: 0;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0;
top: 200px;
}
100% {
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="test1">旋转</div>
<div class="test2">位移</div>
<div class="test3">缩放</div>
<div class="test4">扭曲</div>
<div class="test5">动画</div>
</body>
</html>
css3 transform transition animation 练习
标签：
原文地址：http://www.cnblogs.com/liujin0505/p/4537351.html
