html字体颜色渐变

效果图：

样式

.style1{background: linear-gradient(to bottom,#f0610e, #e8771a, #fff34a);-webkit-background-clip: text;color: transparent;
}
.style2{background: linear-gradient(to right,#f0610e, #e8771a, #fff34a);-webkit-background-clip: text;color: transparent;
}

注：color: transparent，设置原字体颜色为透明，

-webkit-background-clip: text，文本渐变

linear-gradient() 函数

从上到下，蓝色渐变到红色 */ linear-gradient(45deg, blue, red);

渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red);

从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red);

从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);

源代码

<div class="center-in-center"><h1 class="style1">从上到下</h1><h1 class="style2">从左到右</h1>
</div>

html字体颜色渐变相关推荐

html字体渐变颜色的设置颜色代码,使用CSS3实现字体颜色渐变的实现
在使用Animation.css的时候发现它的官网字体会渐变,看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit ...
设计师妹子问：字体颜色渐变，你能实现？
早上设计师妹子把设计稿交付过来,乍一看,上面的文字颜色渐变的,而且文字内容是动态的,也就是我们无法用图片来代替. 作为一个有责任担当的汉子,坚决不能说不行. 想起了CSS3 擅长做颜色渐变.所以赶紧查 ...
css怎么设置字体颜色渐变
css设置字体颜色渐变的方法:1.使用"background-cli"和"text-fill-color"实现字体颜色渐变:2.使用"mask-ima ...
css设置字体颜色渐变
/* 字体颜色渐变 */ color: #86c9f4; background: -webkit-linear-gradient(90deg, #f3fbfe, #86c9f4); -webkit-b ...
Unity设置字体颜色渐变
unity开发程序在一些必要的的程序的时候需要实现一些简单的渐变效果,之前不太懂都是直接让美术那边出图片用图片来代替,用着用着就让工程中多了很多没有必要的图片.后面找到了一种很好优化包的方法就是直接用 ...
c语言改变输出字体颜色渐变,如何为Qt视图中的文字实现彩虹渐变效果
前言将view中的文本内容用自定义的颜色显示是一种十分常见的需求.今天我们稍微改变些"花样".下面话不多说了,来一起看看详细的介绍吧需求定义我们的需求很简单,现在有一些在vi ...
CSS3j背景渐变，字体颜色渐变，以及兼容IE写法
一.背景渐变 #grad { background: linear-gradient(red, blue); } 渐变路径默认是从上到下,也可以指定路径: 从左到右 #grad { backgroun ...
如何实现CSS字体渐变和字体颜色随时间来回变动
前言:CSS代表层叠样式表(Cascading Style Sheets),是一种用于定义网页外观和样式的语言.通过CSS,网页开发人员可以指定如何呈现HTML元素,包括颜色.字体.大小.布局和其他视 ...
php红色字体颜色,php生成文字颜色渐变高级用法
项目描述:因为要做打印的产品价格贴,需要美观度,产品名字需要颜色渐变. 这里非常感谢ThinkPHP 峰会4 里面的大神们. @[厦门]伍拾步 @[上海]beyond @[江苏]囧NC @[浙江]幸福 ...

html字体颜色渐变

html字体颜色渐变相关推荐

最新文章

热门文章