saas使用@each循环定义动画实现呼吸灯效果

<template>
  <div class="card red"></div>
  <div class="card orange"></div>
  <div class="card yellow"></div>
  <div class="card green"></div>
  <div class="card blue"></div>
</template>

// 颜色映射
$colors: (
  red: #ff4d4f,
  orange: #fe7613,
  yellow: #faad14,
  green: #52c41a,
  cyan: #49e2ef,
  blue: #1890ff,
  purple: #844dff,
);
// 呼吸灯持续时间
$duration: 2s;
@each $key, $value in $colors {
    
    
  // 定义动画
  @keyframes breathe#{$key} {
    
    
    0% {
    
    
      box-shadow: inset 0px 0px 16px 1px $value;
      border: 1px solid #fff;
    }
    50% {
    
    
      box-shadow: none;
      border: 1px solid #e6e6e6;
    }
    100% {
    
    
      box-shadow: inset 0px 0px 16px 1px $value;
      border: 1px solid #fff;
    }
  }
  // 定义动画类
  .card.#{$key} {
    
    
    animation: $duration breathe#{$key} infinite;
  }
}