第七节 css3动画之transform位移
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .box{
8 width: 100px;
9 height: 100px;
10 background-color: gold;
11 transition: all 0.5s ease 0s; /* 同时加入动画效果 */
12 }
13
14 .box:hover{
15 /* transform位移比定位位移的性能更高，因为其不影响整体布局，建议使用transform位移 */
16 transform: translate(100px,100px); /* 设置位移 */
17 }
18 </style>
19 </head>
20 <body>
21 <div class="box"></div>
22 </body>
23 </html>