zoukankan      html  css  js  c++  java
  • 【css灵感】渐变字

    直接上效果

    看不到效果点这里

    方法一:借助mask-image属性

    从CSS代码可以看出,效果的实现除了“content内容生成技术”以外,主要是使用了mask-image属性,内容则是“webkit核心浏览器下的渐变”了。

    <h2 class="text-gradient" data-text="【css灵感】渐变字">【css灵感】渐变字</h2> 
    <style>
    .text-gradient {  
        display: inline-block;
        font-family: '微软雅黑';
        font-size: 10em;
        position: relative; 
    }  
      
    .text-gradient[data-text]::after {  
        content: attr(data-text);  
        color: green;  
        position: absolute;  
        left: 0;  
        z-index: 2;
        -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
    }
    </style>
    
    

    方法二:background-clip + text-fill-color下的实现

    此方法虽然使用的CSS属性相对多些,但是结构简单,易于控制,颜色的选取与控制也更精确,理解上也更容易理解。我个人是推荐使用方法二的。

    <h1 class="text-gradient">【css灵感】渐变字</h1>
    <style>
    .text-gradient {  
        display: block;
        color: green;
        font-size: 4em;
        text-align:center;
        font-family: '微软雅黑';
        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ebeef2), to(#2e9fff));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    };
    </style>
    

    看不到效果点这里

    本文来自博客园,作者:墨抒颖,转载请注明原文链接:https://www.cnblogs.com/moshuying/p/15710991.html

  • 相关阅读:
    java内存溢出
    jstack命令使用
    JVM问题排查步骤
    c++指针常量和常量指针
    c++ 通讯录
    冒泡排序
    翻转数组
    敲桌子
    求一个100-999之间的水仙花数
    elasticsearch 模板的使用
  • 原文地址:https://www.cnblogs.com/moshuying/p/15710991.html
Copyright © 2011-2022 走看看