CSS文字特效：连续光影变化

使用animation-delay属性配合scss预处理器循环，制作文字连续光影变化效果。

代码如下

<div>
    <span>文</span>
    <span>字</span>
    <span>连</span>
    <span>续</span>
    <span>光</span>
    <span>影</span>
    <span>变</span>
    <span>化</span>
    <span>特</span>
    <span>效</span>

</div>

$begin-color:#333;
$end-color:#eead0c;
span{
  color:$begin-color;
  animation: colorChange 1s ease-in-out infinite alternate;
}



@keyframes colorChange {
  to{
    color: $end-color;
  }
}
//10个文字，从1到10循环,包含结束值10
@for $i from 1 through 10{
  span:nth-child(#{$i}){
    animation-delay: ($i - 1)*0.2s;
  }
}
////10个文字，从1到10循环,不包含结束值11
//@for $i from 1 to 11{
//  span:nth-child(#{$i}){
//    animation-delay: ($i - 1)*0.2s;
//  }
//}

涉及知识点

• scss变量声明：$begin-color:#333;
• animation属性的ease-in-out代表动画效果从慢到快再到慢
• scss循环：@for $i from 开始值 through 结束值 through包含结束值
• scss循环如果不包含结束值语法：@for $i from 开始值 to 结束值
• #{$i} 插值语句将变量包裹，避免运算
• ($i - 1):使用变量与括号，可运算