图片缩小右移旋转

Posted 2020-09-23 曦言鸢默

　　　　　　　　图片在缩小右移的同时旋转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