先看个效果

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 入门 - 方法和接口

    方法和接口 方法的接受者 Go中没有类,取而代之的是在结构体上定义的方法 为了将方法(函数)绑定在某一类结构体上,我们在定义函数(方法)时引入"接受者"的概念. 方法接受者在它自己 ...

  2. MongoDB入门---数据库&&&集合的基本操作

    MongoDB作为一种nosql的数据库,它自己本身的增伤改查还有数据库集合的创建和展示与一般的数据库较之是有一部分差别的.我们今天就来看一下MongoDB的一些基本操作.    首先呢,就是先来数据 ...

  3. mySQL安装的时候一直卡在starting server这里解决办法

    昨天安装mySQL的时候一直卡在了starting server这里,等了半天都没反应,后来就去网上寻找解决办法,大部分是说什么设置mysql本地启动服务啊,删除注册表啊,这些办法都试过了 然并卵. ...

  4. 20145226夏艺华 《Java程序设计》第1周学习总结

    http://www.cnblogs.com/bestixyh/p/5779286.html 去年暑假写的,确实比较丑陋,保留下来也是为了激励自己作出更多改变.寒假写的每一篇博客都尽最大努力养成了良好 ...

  5. 成都优步uber司机第三组奖励政策

    今天成都优步又推出了优步司机第三组,第一二组的奖励大家都晓得,但是第三组的奖励怎么样呢?还是先看看官方给出的消息. 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册 ...

  6. python的阶段复习

    1.ABCD乘于9 = DCBA,求ABCD的值,且ABCD均互不相等 #!/usr/bin/env python # -*- coding:utf-8 -*- # @Time :2017/12/26 ...

  7. CC2541工程优化等级的问题

    1. 调试工程的时候发现,优化等级稍微调高一级,就容易出问题,只能用None,其他等级会出现数据丢失的现象.

  8. 一 Hive安装及初体验

    一 .Hive安装及初体验 1 .hive简介 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. 1.1直接使用hadoop面临的问题 ...

  9. 根据wsdl生成服务端代码

    场景描述 最近在和一家公司做业务接口对接,由他们那边回调我们这边,对方直接扔过来一个webservice的wsdl文件,让我们按照他们的规范来做webservice服务, 大多数的对接应该是我们创建完 ...

  10. hdu1175连连看(dfs+细节)

    连连看 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...