图片在缩小右移的同时旋转720度效果图
1 <style> 2 body{ 3 position: relative; 4 } 5 #box img{ 6 width: 300px; 7 position: absolute; 8 height: 300px; 9 background: #f88e11; 10 -webkit-transform-origin: center center; 11 -moz-transform-origin: center center; 12 -ms-transform-origin: center center; 13 -o-transform-origin: center center; 14 transform-origin: center center; 15 /*border-radius: 50%;*/ 16 /*animation: smaller 5s linear infinite;*/ 17 -webkit-animation:smaller 3s linear infinite; 18 -o-animation:smaller 3s linear infinite; 19 animation:smaller 3s linear infinite; 20 } 21 @keyframes smaller{ 22 0%{ 23 left: 0px; 24 top: 100px; 25 width: 480px; 26 height: 300px; 27 -webkit-transform: rotate(0deg); 28 -moz-transform: rotate(0deg); 29 -ms-transform: rotate(0deg); 30 -o-transform: rotate(0deg); 31 transform: rotate(0deg); 32 } 33 34 100%{ 35 left: 700px; 36 top: 0; 37 width: 0px; 38 height: 0; 39 -webkit-transform: rotate(720deg); 40 -moz-transform: rotate(720deg); 41 -ms-transform: rotate(720deg); 42 -o-transform: rotate(720deg); 43 transform: rotate(720deg); 44 } 45 } 46 </style>
1 <div id="box"><img src="1.jpg" alt="图片"></div>
参考图：
1.jpg