iconfont 图标如何实现颜色渐变


最近项目中UI 设计了图标渐变效果,在此处记录下:

  html部分代码:

 <view class="icon iconfont iconyuezhifu_icon item-icon"></view>

css:

 .item-icon{
            // color: #e54746;
            font-size: 52rpx;
            background-image: linear-gradient(135deg, 
            #eb6867 0%, 
            #e85857 67%, 
            #e54746 100%);
            -webkit-background-clip: text;
            color:transparent;
  }

 除了设置 -webkit-background-clip :text; 

实现渐变字体,还需要将color 设置为transparent 来配合一起使用


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM