需求:令一枚图片先“从左上到右下”放大并“抖动”,再从“右上到左下”一直运动下去。
技术: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>