先看个效果

https://www.bienvillecapital.com/

然后人家样式这样写的

    font-family: Overpass,Helvetica,sans-serif;
font-weight: 100;
font-style: normal;
font-size: 43px;
line-height: 1.55;
  // 主要代码 背景先渐变
background: -webkit-gradient(linear,left top,left bottom,from(#baa898),to(#f66));
background: linear-gradient(#baa898,#f66);

   background: -webkit-linear-gradient(#baa898,#f66);
  //  以文本内容来剪辑背景
   background-clip: text; text-fill-color: transparent;
   -webkit-background-clip: text;
  // 让文本颜色透明
-webkit-text-fill-color: transparent;

-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;

css3 字体渐变的更多相关文章

  1. css3背景及字体渐变

    1.背景渐变: .linear { width: 100%; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,sta ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  4. CSS3技巧:利用css3径向渐变做一张优惠券(转)

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  5. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  6. CSS3 字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...

  7. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  8. CSS3背景渐变。。。

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  9. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局(转载)

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

随机推荐

  1. Numpy 01

    Infi-chu: http://www.cnblogs.com/Infi-chu/ import numpy as np # 创建的数组 stus_score = np.array([[80, 88 ...

  2. POJ-2155:Matrix(二维树状数祖)

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 31892   Accepted: 11594 Descript ...

  3. 四则运算_EX

    在原有四则运算基础上,除整数以外要支持真分数运算(验证正确性) 一次出的题避免相互重复 可定制出题数目 #include <stdio.h>#include <stdlib.h> ...

  4. Java线程和多线程(十一)——BlockingQueue

    这次讨论的是Java的BlockingQueue,java.util.concurrent.BlockingQueue是一个Java的队列接口,支持一系列操作,比如,在获取和移除对象的时候如果队列为空 ...

  5. js函数相关高级用法

    一.惰性载入函数(lazy function) 使用场景:当一个函数中的判断分支只用执行一次(第一次调用时执行),后续不会再变化,则可以使用惰性函数来提高性能. var addEvent = func ...

  6. 第一章 了解TCP/IP协议族

    第一章 了解TCP/IP协议族 1.1 TCP/IP协议族体系结构以及主要协议 IP和TCP协议对编写程序具有最直接的影响,后面的章节会详细的讲到. TCP/IP的体系结构有应用层,传输层,网络层,数 ...

  7. JavaScript 常用正则示例

    1. trim功能(清除字符串两端空格) String.prototype.trim = function() {  return this.replace(/(^\s+)|(\s+$)/g, '') ...

  8. [JSON].getObj( keyPath )

    语法:[JSON].getObj( keyPath ) 返回:[JSON] 说明:返回指定键名路径的JSON对象,指定键名路径不存在时返回空的toJson对象(强烈建议使用 [JSON].exists ...

  9. 关于@media不生效的问题和meta总结

    1:之前做的是两套页面.现在改成响应式布局.发现加上 @media only screen and (max-width: 500px) {    .gridmenu {        width:1 ...

  10. Git版本库工作流程图想

    对照廖雪峰的教程,发现有很多难以理解的地方,画了一个图想方便以后参考 首先两个基本命令反应了版本库最本质的工作流程,后面的命令其实都基于此git add 把文件修改添加到暂存区git commit 在 ...