1. CSS文字填充动画

效果

代码

<h1>Incredible</h1>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: black;
}

h1 {
    color: white;
    font-family: Helvetica;
    font-size: 150px;
    letter-spacing: -4px;
    /* 位置设置为相对位置，允许对伪元素进行定位 */
    position: relative;
    /* 初始颜色设置为透明 */
    color: transparent;
    /* 设置从白色到透明的线性渐变，开始位置到一半的位置为白色，一半的位置到最后是白色逐渐为透明 */
    background-image: linear-gradient(to right, white, white, transparent);
    /* 设置背景大小为200%宽，100%高 */
    background-size: 200% 100%;
    background-repeat: no-repeat;
    /* 设置为text，将背景图像剪辑为文本 */
    -webkit-background-clip: text;
    background-position-x: 200%;
    /* 定义动画，动画持续2秒，有一个ease-in-out计时功能，在页面加载2秒后开始。forward值确保保留最终的动画状态 */
    animation: 2s fillup ease-in-out 2s forwards;
}

h1::after {
    /* 设置伪元素的文本内容为“Incredible” */
    content: 'Incredible';
    position: absolute;
    top: 0;
    left: 0;
    /* 设置文本周围2像素的描边 */
    -webkit-text-stroke: 2px;
    /* 设置描边颜色为白色 */
    -webkit-text-stroke-color: white;
    /* 设置填充颜色为透明 */
    -webkit-text-fill-color: transparent;
    opacity: 0;
    /* 定义动画，持续2秒，立即开始。forward值确保保留最终的动画状态。 */
    animation: 2s fadein ease-in-out forwards;
}

@keyframes fillup {
    from {
        background-position-x: 200%;
    }
    to {
        background-position-x: 0%;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

注意

使用-webkit修饰的属性是为了适应不同浏览器，是针对WebKit浏览器引擎（如Safari和Chrome）的前缀，确保对旧版浏览器的兼容性。