Ribbons 2 CSS 动态丝带效果怎么用？前端开发者实战代码示例分享

.custom-ribbon .ribbon {
  animation: myAnimation s infinite;
}
@keyframes myAnimation {
  0% { transform: rotate(-5deg) translate(, ); }
  50% { transform: rotate(deg) translate(px, ); }
  100% { transform: rotate(-5deg) translate(, ); }
}

@media (max-width: px) {
  .ribbon-container .ribbon {
    font-size: 0.8rem;
    padding: 0.5rem rem;
  }
}

if (window.innerWidth < ) {
  // 不初始化丝带
} else {
  Ribbons.create('#ribbon-container', { /* 配置项 */ });
}

<div class="product-card">
  <img src="product.jpg" alt="产品图片">
  <div id="discount-ribbon">div>
div>

Ribbons.create('#discount-ribbon', {
  content: '限时折扣',
  color: '#e74c3c',
  position: 'top-right',
  animation: 'float',
  animationSpeed: 1.5
});

#discount-ribbon .ribbon {
  border-radius:    px;
  box-shadow:  px px rgba(, , , 0.1);
}