HTML中文字的CSS 渐变样式
· 技术积累 · Html

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>

效果示例:

本文最后更新时间 2023-11-17
文章链接地址:
https://me.jinchuang.org/archives/526.html
本站文章除注明[转载|引用],均为本站原创内容,转载前请注明出处

留言列表

  1. 演员
    演员 Windows 7 Google Chrome · 中国上海市联通IDC机房 · 回复

    有点好玩

留言