s.gif

    1.  <style>
    2.         @keyframes spin {
    3.             to {
    4.                 transform: rotate(1turn);
    5.             }
    6.         }
    7.         .avatar {
    8.             width: 200px;
    9.             height: 200px;
    10.             margin: 50px auto;
    11.             animation: spin 5s infinite linear;
    12.             transform-origin: 50% 150px;
    13.             background-color: orangered;
    14.             border-radius: 50%;
    15.             /* 150px = 路径的半径 */
    16.         }
    18.         .avatar>img {
    19.             width: 50px;
    20.             height: 50px;
    21.             padding: 30px;
    22.             border-radius: 50%;
    23.             animation: inherit;
    24.             animation-direction: reverse;
    26.         }
    27.     </style>
    30. <body>
    31.     <div class="path">
    32.         <div class="avatar">
    33.             <img src="10.jfif" />
    34.         </div>
    36.     </div>
    37. </body>