CSS3-字体渐变色

示例：Mauger`s Blog

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Mauger`s Blog</title>
    
    <style type="text/css">
        body {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: black;
        }
    
        .color-a {
            font-size: 48px;
            color: #696969;
            text-decoration: none;
            background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: hue 60s infinite linear;
        }
        
        @-webkit-keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg);
                filter: hue-rotate(0deg); 
            }
            to {
                -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg); 
            } 
        }

        @keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg);
                filter: hue-rotate(0deg); 
            }
            to {
                -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg); 
            } 
        }
    </style>
</head>
<body>
    <a href="https://maugerwu.github.io/" class="color-a">Welcome To Mauger`s Blog</a>
</body>
</html>

 

posted @ 2018-03-25 21:30  梦飞扬~  阅读(1964)  评论(0)  编辑  收藏  举报