文字颜色渐变特效

weixin_33888907

于 2016-01-08 08:31:00 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/20739

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="gbk">
        <title></title>
        <style type="text/css">
            @media (min-width: 650px) {
                .mega {
                    color: #7b8993;
                    font-size: 6rem;
                    line-height: 1;
                }
            }

            h1 {
                font: 100%/2.5 "Roboto", Verdana, sans-serif;
                -webkit-animation: bounceInUp 1s;
            }

            .site__title {
                display: block;
                text-align: center;
                color: blueviolet;
                background-image: -webkit-linear-gradient(0deg, #f35626, #feab3a);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -webkit-animation: hue 10s infinite linear;
            }

            @-webkit-keyframes hue {
                from {
                    -webkit-filter: hue-rotate(0deg);
                }
                to {
                    -webkit-filter: hue-rotate(-360deg);
                }
            }
        </style>
    </head>

    <body>
        <h1 class="site__title mega">我是你大爷</h1>
    </body>

</html>