看着阿里云小动画挺可爱的，来来来，撸一发
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阿里云小动画</title> <style> .box{ width: 128px; height: 128px; margin: 0 auto; background-color: #eee; background-image: url(https://img.alicdn.com/imgextra/i4/19999999999999/O1CN019FqNuv2NjaswQicY2_!!19999999999999-2-tps.png); background-position-y: 0px; } </style></head><body> <div class="box" onmouseover="mouseover(true)" onmouseout="mouseover(false)"></div> <script> let i=0 function mouseover(isAdd){ var el = document.querySelector('.box') let num = 20 let h = 128 var timer = function(){ setTimeout(function(){ el.style.backgroundPositionY = -(h*i) + 'px' if(isAdd){ if(i<num){ i++ timer() } }else{ if(i>0){ i-- timer() } } }, 20); } timer() } </script></body></html>
