如何实现 Ribbons 2 跨浏览器兼容的动态丝带效果？响应式设计解析

<div class="ribbon-container">
  <div class="ribbon-outer">
    <div class="ribbon-inner">
      <span>新品上市span>
    div>
  div>
div>

.ribbon-container {
  position: relative;
  overflow: hidden; /* 关键：防止丝带溢出父容器 */
  width: px;
  height: px;
}

.ribbon-outer {
  position: absolute;
  top: ;
  right: ;
  width: px;
  height: px;
  /* 核心形变：实现丝带倾斜效果 */
  transform: rotate(deg) translate(px, -50px);
  -webkit-transform: rotate(deg) translate(px, -50px); /* 兼容webkit内核 */
  -ms-transform: rotate(deg) translate(px, -50px); /* 针对IE9+ */
  background: linear-gradient(deg, #ff4e50 %, #f9d423 %);
  box-shadow:  px px rgba(,,,0.2);
}

// 监听滚动显示动画
function handleRibbonAnimation() {
  const ribbons = document.querySelectorAll('.ribbon-container');
  ribbons.forEach(ribbon => {
    const rect = ribbon.getBoundingClientRect();
    // 元素进入视口时触发动画
    if (rect.top < window.innerHeight * 0.8) {
      ribbon.classList.add('animate-in');
    }
  });
}

// 兼容触摸设备的交互处理
function setupTouchEvents() {
  const ribbons = document.querySelectorAll('.ribbon-outer');
  ribbons.forEach(ribbon => {
    ribbon.addEventListener('touchstart', () => {
      ribbon.classList.add('touched');
    });
    ribbon.addEventListener('touchend', () => {
      setTimeout(() => {
        ribbon.classList.remove('touched');
      }, );
    });
  });
}