CSS文字渐变

Posted on 2019-08-05 17:16  勤勤恳恳大猿人  阅读(363)  评论(0)  编辑  收藏  举报 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;

        }
        body{
            display: flex;
        
            align-items:center;
            justify-content:center;
            
        }
        .wrap{
            height: 250px;
            width: 40px;
            line-height: 40px;
            font-size: 30px;
            word-break: break-all;
            word-wrap: break-word;
            background-image: -webkit-linear-gradient(top,#FFFAF0,#FFEC8B 25%,#FFC125 50%,#FFA500 75%,#FF7F24);
            -webkit-text-fill-color:transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 100% 200%;
              -webkit-animation: text-change 2s infinite linear;
        }
        
        @-webkit-keyframes text-change {
             0%{ background-position: 0 0;}
             100% { background-position:0 -100%;}
        }
    </style>
</head>
<body>
    <div class="wrap a">文字渐变测试</div>
    <div class="wrap a b">文字渐变测试</div>
</body>
</html>