效果图
文章来源地址https://www.toymoban.com/news/detail-684266.html
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;
}
文章来源：https://www.toymoban.com/news/detail-684266.html
到了这里，关于css之文字连续光影特效、动画、scss的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
