---

效果图

---

html

<div><span>C</span><span>O</span><span>L</span><span>O</span><span>R</span><span>F</span><span>U</span><span>L</span>
</div>

---

scss

body {background-color: #696969;text-align: center;
}span {color: #faebd7;font-size: 68px;font-weight: 700;animation: spread 1s ease-in-out infinite alternate;
}@keyframes spread {to {color: #ff0266;text-shadow: 20px 0 70px #ff0266;}
}@for $i from 1 through 8 {span:nth-child(#{$i}) {animation-delay: ($i - 1) * 0.2s;}
}

---

css

body {background-color: #696969;text-align: center;
}span {color: #faebd7;font-size: 68px;font-weight: 700;animation: spread 1s ease-in-out infinite alternate;
}@keyframes spread {to {color: #ff0266;text-shadow: 20px 0 70px #ff0266;}
}span:nth-child(1) {animation-delay: 0s;
}span:nth-child(2) {animation-delay: 0.2s;
}span:nth-child(3) {animation-delay: 0.4s;
}span:nth-child(4) {animation-delay: 0.6s;
}span:nth-child(5) {animation-delay: 0.8s;
}span:nth-child(6) {animation-delay: 1s;
}span:nth-child(7) {animation-delay: 1.2s;
}span:nth-child(8) {animation-delay: 1.4s;
}