css动画
html:
1 <div class="container"> 2 <img src="./1.png" class="img"> 3 </div>
css:
.container{ width: 500px; height: 200px; background-color: yellow; text-align: center; } .img{ animation: transform 2.5s linear infinite forwards; } .img:hover{ animation-play-state: paused; } /*4个时间段,0%到25%,从最低点到左上;25%到50%,从左上到最低点;50%到70%,从最低点到右上;70%到100%,从右上到最低点*/ @-webkit-keyframes transform { 0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} 25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);} 50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} 75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);} 100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} } @keyframes transform { 0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} 25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);} 50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} 75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);} 100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} }
效果: