css动画实现字体依次闪烁效果

菜鸟许良个人笔记

已于 2024-08-28 11:43:42 修改

阅读量227

点赞数 2

文章标签： css 前端 javascript

于 2024-08-28 10:25:15 首次发布

本文链接：https://blog.csdn.net/m0_57022950/article/details/141634210

版权

1.html部分

 <div class="flashing-letters">
        <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>

2.css部分

.flashing-letters {
    height: 50px;
    width: 350px;
    color: #fff;
    font-weight: 800;
    background-color: black;
    font-size: 30px;

    span {
        padding: 10px;
        animation: colorChange 1s infinite alternate;
    }
}

@keyframes colorChange {
    to {
        color: #ff0266;
    }
}

@for $i from 1 through 8 {
    .flashing-letters {
        span:nth-child(#{$i}) {
            animation-delay: ($i - 1)*0.2s;
        }
    }
}

3.效果