利用<div>层 和<img>标签，实现一个图片两个动画效果

需求：令一枚图片先“从左上到右下”放大并“抖动”，再从“右上到左下”一直运动下去。

技术：html5 + css3

实现：

1、通过动画属性，改变图片所在<div>层的大小：

#div_cloud{position: relative;-webkit-animation: cloud_infinite_move 2s infinite;}

@-webkit-keyframes cloud_infinite_move{

0%{ top: 0px;left: 0px;}50%{ top: -10px;left: 10px;}100%{ top: 0px;left: 0px;}<span style="font-family: Arial, Helvetica, sans-serif;">}</span>

2、通过动画效果，改变<img>本身的效果：

#div_cloud{position: relative;-webkit-animation: cloud_infinite_move 2s infinite;}

@-webkit-keyframes topcloud_show{<span style="font-family: Arial, Helvetica, sans-serif;">0%{width: 10px; height: 10px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">50%{width: 40px; height: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">75%{width: 36px; height: 36px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">85%{top: 40px;left: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">90%{top: 36px;left: 36px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">100%{top: 40px;left: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span>