先看个效果

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. go内建容器-Map

    1.基础定义 golang中的map如同它的函数一样"纯粹",map就是用来存储键值对的容器,别管什么哈希不哈希的(底层已实现),用就行 //创建一个map m := map[st ...

  2. 【blockly教程】第六章 Blockly的进阶

    6.1 模块化程序设计  一个较大的程序一般应分为若干个程序模块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序实现模块的功能.比如在C语言中,子程序的作用是由函数完成 ...

  3. Milking Order

    Milking Order 题意:给出m个描述状态,其中包含若干个边的关系,问最多能取x (x<=m)个状态,使得形成的图没有环.就是说取x个状态,用状态中的关系建边,其中不能有环. 题解:最大 ...

  4. 【Hutool】Hutool工具类之Http工具——HttpUtil

    最简单最直接的上手可以参见参考文档:http://hutool.mydoc.io/?t=216015   Http协议的介绍,请参考web随笔:http://www.cnblogs.com/jiang ...

  5. Hough变换-理解篇

    Hough变换-理解篇 霍夫变换(Hough Transform)是图像处理中的一种特征提取技术,它通过一种投票算法检测具有特定形状的物体.该过程在一个参数空间中通过计算累计结果的局部最大值得到一个符 ...

  6. JavaSE基础笔记

    JVM 不是跨平台的,他是用 C++编写的. Path 环境变量的地址是 ...jdk/bin java_home 地址是 ...jdk

  7. .net backend return json string , used by frontend

    伪代码: backend: public string GetJson() { var lst = xxxLst; var obj = Json(lst);return new JavaScriptS ...

  8. selenide 自动化测试进阶一: 查找元素和相关操作

    基础环境配置和举例请移步:https://www.cnblogs.com/davice/p/9298742.html 提到自动化有些测试同学就会问,我会使用工具录制做自动化,我会用工具或插件识别元素. ...

  9. 搭建hexo博客并部署到github上

    hexo是由Node.js驱动的一款快速.简单且功能强大的博客框架,支持多线程,数百篇文章只需几秒即可生成.支持markdown编写文章,可以方便的生成静态网页托管在github上. 感觉不错. 前端 ...

  10. java基础-Comparator接口与Collections实现排序算法

    java 排序Comparable和Comparator使用 java提供了两个排序用的接口Comparable和Comparator,一般情况下使用区别如下: Comparable 接口用于类的固定 ...