靳闯博客 记录是一种习惯 、分享是一种态度
  • 波浪
  • 波浪
  • 波浪
  • 波浪
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>

效果示例:


商业转载请联系作者获得授权,非商业转载请注明出处 本文地址:https://me.jinchuang.org/archives/526.html

如果这篇文章帮助到了你,我感到十分荣幸!


📑 留言内容

  1. 有点好玩

📬 评论留言 ↴

TOP