精灵图获取位置

打开这个网站 www.spritecow.com/

F11控制台输入

var data=[];
function observeCodeChanges() {
  // 获取所有的 <code> 元素
  var codeElements = document.querySelectorAll('code');

  // 遍历所有的 <code> 元素
  codeElements.forEach(function(codeElement) {
      // 创建一个新的 MutationObserver
      var observer = new MutationObserver(function(mutationsList) {
          // 当内容发生变化时执行的回调函数
          mutationsList.forEach(function(mutation) {
              // 检查是否是子节点内容变化
              if (mutation.type === 'childList') {
                  // 获取变化后的代码内容
                  var newCodeContent = codeElement.textContent;
                  const _firstIndex=newCodeContent.indexOf('no-repeat')+10;
                  const str01=newCodeContent.substring(_firstIndex,newCodeContent.length);
                  const str02=str01.indexOf(";");
                  const _text=str01.substring(0,str02);
                  console.log(_text,'_text');
                  if(data.includes(_text)===false){
                    data.push(_text)
                  }
                 // console.log('代码块内容已变化:', newCodeContent.substring(newCodeContent.indexOf('no-repeat'),newCodeContent.length-40));
                  // 在这里执行你的逻辑
              }
          });
      });

      // 开始观察指定的 <code> 元素
      observer.observe(codeElement, { childList: true, subtree: true });
  });
}

function getCss(){
  let size=Number((100/data.length).toFixed(2));
  let count=0;
  data.forEach((item,index)=>{
    data[index]=`${count}%{background-position:${item};}`
    count=Number((count+size).toFixed(2));
  })
  return data.join("")
}

// 调用监听代码块内容变化的函数
observeCodeChanges();

监听每一次点击精灵图获取的位置，方法做了简单的去重，不过使用是要考虑动画执行顺序

最后调用

getCss()

最后得到从0%-100%的 background-position的代码坐标

需要修改的可以自己定义添加的内容