刷新按钮转圈动画效果<p class="balance-title qc_interval">余额(元)<span id="refresh" > <img class="refresh" src="../images/icon/new.png" ></span></p> .refresh { width:0.9rem;height: 0.9rem;margin-bottom: 0.1rem } /* 刷新动画 */ @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } //刷新事件 $(".refresh").on('click', function () { $(this).css("-webkit-animation", "rotation 1s ease-out 1"); $(this).css("-ms-animation", "rotation 1s ease-out 1"); $(this).css("animation", "rotation 1s ease-out 1"); var z = $(this); Isrefresh(de_istm) setTimeout(function () { $(z).css("animation", ""); }, 1000); });
刷新按钮转圈动画效果
于 2023-03-13 16:51:49 首次发布