css高级——keyframes的实用

简易动态摩天轮的制作：

css：

 

html：

 

 效果：

从而实现了这个图片的转动，并且这个小人图片还会跟着摩天轮的转动而转动。

 

 

注：

/*使用transform实现元素的移动  a.移动是参照元素的左上角  b.执行完毕之后会恢复到原始状态
17             1.如果只有一个参数就代表x方向
18             2.如果两个参数就代表x/y方向*/
19             /*transform: translate(100px);*/
20             /*transform: translate(200px,100px);*/
21             /*添加水平方向或处置方向的移动*/
22             /*transform: translateX(300px);

 

 /*实现缩放  1指不缩放，>1放大  <1缩小  参照元素的几何中心
29             1.如果只是一个参数，就代表x和y方向都进行相等比例的缩放
30             2.如果有两个参数，就代表x/y方向*/
31             /*transform: scale(2);*/
32             /*transform: scale(2,1);*/
33             /*缩放指定的方向*/
34             /*transform: scaleX(0.5);*/

/*设置旋转轴心
43             1.x  y
44             2.transform-origin:left top right bottom center*/
45             /*transform-origin: left top;*/
46 
47             /*正数为顺时针旋转，负数为逆时针旋转*/
48             /*transform: rotate(30deg);*/
49 
50             /*旋转加移动*/

           /*建议使用上一种顺序添加*/
53             /*transform:  rotate(-90deg) translateX(700px);*/

           /*斜切：skew*/

            /*若果角度为证，则网当前轴的负方向斜切，反之则反*/
59             /*transform: skew(30deg);*/
60             /*transform: skew(30deg,-50deg);*/
61             /*设置某个方向的斜切值*/
62             /*transform: skewX(30deg);*/