效果圖
文章來(lái)源地址http://www.zghlxwxcb.cn/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;
}
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-684266.html
到了這里，關(guān)于css之文字連續(xù)光影特效、動(dòng)畫(huà)、scss的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
