先看个效果

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. 数据结构之链表及其Java实现

    数据的存储一般分线性存储结构和链式存储结构两种.前者是一种顺序的存储方式,在内存中用一块连续的内存空间存储数据,即逻辑上相连的物理位置相邻,比较常见的就是数组:后者是一种链式存储方式,不保证顺序性,逻 ...

  2. Java设计模式(12)——结构型模式之门面模式(Facade)

    一.概述 概念 简要示意图(没有一个统一的UML图) 角色 门面角色:门面模式核心,它被客户端调用,并且熟悉子系统   子系统角色:子系统,子系统并不知道门面的存在,门面对它来说只不过是另外一个客户端 ...

  3. Java设计模式(9)——结构型模式之装饰模式(Decorator)

    一.概述 动态地给一个对象添加一些额外的职责.就增加功能来说, Decorator模式相比生成子类更为灵活.该模式以对客 户端透明的方式扩展对象的功能. UML简图 角色 在持有Component的引 ...

  4. 厦门Uber优步司机奖励政策(12月28日到1月3日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. cyclone4驱动LM75A温湿度传感器学习

    1. LM75A第一次使用,I2C接口,8脚 2. 打开quartus工程,下面只要是看看代码结构,问题在于多个always语句,逻辑上不太好分清楚,主要看状态机 module I2C_READ( c ...

  6. Linux怎样创建FTP服务器--修改用户默认目录-完美解决 - 费元星

    在创建FTP服务器之有先命令: ps -ef |grep vsftpd 查一下系统有没有安装vsftpd这个服务器,如果出现如下图所示的界面说明没有安装.   然后再执行:yum install vs ...

  7. /proc/meminfo详解

    cat /proc/meminfo   读出的内核信息进行解释, 下篇文章会简单对读出该信息的代码进行简单的分析. MemTotal:       507480 kB MemFree:         ...

  8. pg 与 oracle 比较

    所谓动态引擎,就是说比如有很多张表的Join,原始的做法是一开始就生成好这个执行计划,随后执行,但实际上很多表Join的时候,你一开始生成的那个执行计划很有可能是不对的. 那么动态执行计划就是指它可以 ...

  9. ElasticSearch搜索引擎在JavaWeb项目中的应用

    近几篇ElasticSearch系列: 1.阿里云服务器Linux系统安装配置ElasticSearch搜索引擎 2.Linux系统中ElasticSearch搜索引擎安装配置Head插件 3.Ela ...

  10. Qt-网络与通信-获取本机网络信息

    在网络应用中,经常需要获取本机主机名和IP地址和硬件地址等信息.运用QHostInfo.QNetworkInterface.QNetworkAddressEntry可以获得本机的网络信息. 上运行截图 ...