linear-gradient实现纯CSS文字淡入效果

最新推荐文章于 2025-03-03 08:00:00 发布

前端丁修

最新推荐文章于 2025-03-03 08:00:00 发布

阅读量6.5k

点赞数

文章标签： css keyframes linear-gra

本文链接：https://blog.csdn.net/u010035608/article/details/52711824

版权

本文介绍了如何使用CSS的linear-gradient属性和keyframes动画来创建文字淡入效果。通过详细讲解css代码、html结构以及关键的操作步骤，展示了实现文字平滑渐变显示的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用CSS中的linear-gradient属性和帧动画，实现文字的淡入效果。

css代码 linear-gradient属性

@-webkit-keyframes shinetext {
    0% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    7% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    14% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
        color: transparent;
        -webkit-background-clip: text;
    }
    21% {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) <