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

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
本站文章除注明[转载|引用],均为本站原创内容,转载前请注明出处
纯CSS 蝴蝶飞舞动画效果
网页禁用iframe子页面的右键
自用的网页鼠标指针
CSS3/jQuery实现移动端滑动图片层叠效果

Xmanager6安装使用 附序列号和补丁

Centos7 搭建PPTP-VPN 服务

留言列表

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

    有点好玩

我要留言