HTML中文字的CSS 渐变样式

html中文字的css渐变样式，觉得很不错就收藏下，方便以后使用，代码来自Chakhsu Lau的Pinghsu主题404页面

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <style>
        body{
            margin:0;padding:0;
            font-family: PingFang SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
        }
        .gradually {
            margin: 0 auto;
            text-align: center;
            letter-spacing: 2px;
            font-size: 80px;
            font-weight: 100;
            color: #f35626;
            background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: hue 20s infinite linear; /*此处秒数控制颜色变化间隔*/
        }
        @-webkit-keyframes hue {
          from {
            -webkit-filter: hue-rotate(0deg);
          }

          to {
            -webkit-filter: hue-rotate(-360deg);
          }
        }
        </style>
    </head>
    <body>
        <div class="gradually">gradually 渐变</div>

</body>
</html>

效果示例：

本文最后记录时间 2024-03-30
文章链接地址：https://me.jinchuang.org/archives/526.html
本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处

留言列表

留言