koliu/f2e-9-weeks-challenge-04-product-gallery

No.4 Product Gallery

---

DEMO

spec

Note

animation(baber-pole, 霓虹燈效果) for repeating-linear-gradient

• CSS repeating-linear-gradient() Function
• CSS Repeating Gradients
• A Striped Barberpole Animation

.pattern {
  background-image: repeating-linear-gradient(
    135deg,
    $color-blue,
    $color-blue 18px,
    transparent 10px,
    transparent 34.5px
  );
  /* 必須設 size 才能有移動效果 */
  background-size: 200% 200%;
}

@keyframes barber-pole {
  100% {
    background-position: 100% 100%;
  }
}

.pattern:hover {
  animation: barber-pole 10s linear infinite;
}