先看个效果

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. C、C++混合调用

    在项目中,C和C++代码相互调用是很常见的,但在调用时,究竟应该如何编写代码和头文件,有一些讲究,不然就可能出现编译时链接不通过的问题,典型的编译错误日志是: undefined reference ...

  2. 第五节 Go数据结构之队列

    一.什么是队列 数据结构里的队列就是模仿现实中的排队.如上图中狗狗排队上厕所,新来的狗狗排到队伍最后,最前面的狗狗撒完尿走开,后面的跟上.可以看出队列有两个特点: (1) 新来的都排在队尾: (2) ...

  3. [原创]python写的sniffer

    import socket s=socket.socket(socket.PF_PACKET,socket.SOCK_RAW,8) while 1: data=s.recv(65535) print ...

  4. MySQL高级第四章——MySQL的锁机制

    一.概述 1.定义 锁是计算机协调多个进程或线程并发访问某一资源的限制. 2.分类 操作类型来分: 读锁(共享锁)和写锁(排它锁) 数据粒度来分: 表锁和行锁 二.三锁 1.表锁——偏读 特点: 偏向 ...

  5. 收集、分析线上日志数据实战——ELK

    本文来自网易云社区 作者:田躲躲 用户行为统计(User Behavior Statistics, UBS)一直是互联网产品中必不可少的环节,也俗称埋点.对于产品经理,运营人员来说,埋点当然是越多,覆 ...

  6. HTTP请求中get和post的区别是什么

    GET和POST是Http请求中最常用的两种请求方法 首先介绍GET与POST的差异: (1)GET请求资源数据,POST向服务器传递需要处理的数据 (2)GET传递数据大小不超过2kb,POST没有 ...

  7. Selenium(Python)页面对象+数据驱动测试框架

    整个工程的目录结构: 常用方法类: class SeleniumMethod(object): # 封装Selenium常用方法 def __init__(self, driver): self.dr ...

  8. jenkins配置git+maven+Publish over SSH

    一.配置git 1.新建项目,源码管理选择git 2.Repository URL输入git目录 3.Credentials中选择新增凭据,凭据类型选择SSH,usename输入git,passphr ...

  9. [python]np.loadtxt报错

    np.loadtxt报错 通过pandas生成的cvs数据利用nump.loadtxt读取的时候 tmp = np.loadtxt('test.csv', dtype=np.str, delimite ...

  10. 换抵挡装置 (Kickdown,ACM/ICPC NEERC 2006,UVa1588

    题目描述:算法竞赛入门经典习题3-11 题目思路:1.两长条移动匹配 2.上下调换,取小者 #include <stdio.h> #include <string.h> int ...