css3 字体渐变
先看个效果
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 字体渐变的更多相关文章
- css3背景及字体渐变
1.背景渐变: .linear { width: 100%; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,sta ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- CSS3之渐变Gradient
渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- CSS3 字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...
- 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)
原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...
- CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- CSS字体渐变 & 隐藏浏览器滚动条 & grid布局(转载)
字体渐变 https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条 https://blog.csdn. ...
随机推荐
- Redis的n种妙用,不仅仅是缓存
redis是键值对的数据库,常用的五种数据类型为字符串类型(string),散列类型(hash),列表类型(list),集合类型(set),有序集合类型(zset) Redis用作缓存,主要两个用途: ...
- 成都Uber优步司机奖励政策(1月8日)
1月8日 奖励政策 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblog ...
- NB-IOT连接基站需要的步骤
本次使用华为海思Hi2110芯片,657SP3版本软件,利尔达的NB-IOT模块,串口波特率9600,基本需要5个AT指令. 1.上电之后设置IEMI号码,见模组上面的标签.AT+NTSETID=1, ...
- http tcp udp
HTTP连接 1.HTTP协议即超文本传送协议(Hypertext Transfer Protocol ),是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用 ...
- Selenium自动化测试基础
如有任何学习问题,可以添加作者微信:lockingfree 目录 Selenium自动化测试基础 Selenium自动化测试第一天(上) Selenium自动化测试第一天(下) Selenium自动化 ...
- 接口测试工具postman(五)批量执行测试用例
1.准备好测试用例及相关数据 2.点击Run按钮 3.选择运行collection或者folder 4.运行完成
- Maya Api笔记 - How polygons are handled internally
为加深记忆和理解Maya的Polygon,尝试利用空闲时间翻译Maya Api文档相关章节. How polygons are handled internally - 多边形是如何在内部处理的
- GameplayKit的GKStateMachine用法与实例
GKStateMachine 玩家进入GameScene场景中 -> 通过GKStateMachine进入到指定的游戏状态GKState 在GameScene场景中 -> 根据不同的逻辑调 ...
- ASP.NET中Gridview一些技巧
ASP.NET中Gridview一些技巧 一.后台覆盖掉Gridview中自动填充的值 我们可以再Gridview中的事件触发的过程中修改其中的值,而这些值将会在具体的运行过程中覆盖掉那些自动属性.这 ...
- 【text】 文本组件说明
text文本组件:在小程序里除了文本节点以外的其他节点都无法长按选中. 原型: <text selectable="[Boolean]" space="[ensp ...