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. ...
随机推荐
- NUCLEO-L053R8 RCC时钟树 MCO输出
RCC时钟配置实验 最近玩了一下Nucleo-L053R8板子,即STM32L053R8T6.浏览了RCC章节后,顺便做了个小实验,现在给大伙分享一下. 实验非常简单,配置一下系统时钟,可以通过肉眼观 ...
- E. Almost Regular Bracket Sequence
题目链接:http://codeforces.com/contest/1095/problem/E 解题心得: 刚开始拿到这个题的时候还真的没什么思路,后来仔细想想还是比较简单的.首先题目要求翻转一个 ...
- [POJ3090]Visible Lattice Points(欧拉函数)
答案为3+2*∑φ(i),(i=2 to n) Code #include <cstdio> int T,n,A[1010]; void Init(){ for(int i=2;i< ...
- CF813D Two Melodies(dp)
题面 luogu Codeforces 题目大意: 给一个长度为\(n\)的序列,求两个不相交的子集长度之和最大是多少,能放入同一子集的条件是首先顺序不能变,然后每一个相邻的要么相差\(1\)或者相差 ...
- underscore.js 分析 第二天
Underscore源码中有这么句obj.length === +obj.length意思是typeof obj.length == number,即检测obj的长度是否是数字我的理解:这么写是来检测 ...
- 调用bash的时候出现curl command not found
调用bash的时候出现curl command not found 解决办法: apt-get install curl
- Updating Homebrew... 长时间不动解决方法
确保你已安装Homebrew 依次输入下面的命令(注意:不要管重置部分的命令,这里原作者贴出来.我也贴出来是以防需要重置的时候有参考操作命令) 替换brew.git: cd "$(brew ...
- 网易七鱼 Android 高性能日志写入方案
本文来自网易云社区 作者:网易七鱼 Android 开发团队 前言 网易七鱼作为一款企业级智能客服系统,对于系统稳定性要求很高,不过难保用户在使用中不会出现问题,而 Android SDK 安装在用户 ...
- Selenium(Python)驱动Chrome浏览器
Chrome浏览器与chromedriver.exe驱动可以是官网上最新的, 随意! Chrome.py: from selenium import webdriverfrom selenium.we ...
- 【WXS数据类型】Object
Object 是一种无序的键值对. 属性: 名称 值类型 说明 [Object].constructor [String] 返回值为“Object”,表示类型的结构字符串 方法: 原型:[Object ...