图片控制的渐变色文字

喜欢女中豪杰

喜欢女中豪杰

2016-01-29 11:33

图片控制的渐变色文字,图片控制的渐变色文字
 

以前我们看到的所谓连续渐变色文字,都是逐字变色的。而我们看到的下面的演示中的真正的连续渐变色文字,你应该没有见过吧?而且演示中是一个文本输入框,它可以接受用户的输入!


实际上,我们看到的渐变色文字的颜色,是透明的文字背后的渐变色图片的颜色。下面让我们看看它是怎么做出来的。

先介绍一下这个神奇的滤镜:Chroma() 滤镜。

它的语法是: FILTER:Chroma( Color=#FF0000) ,其中“#FF0000”是颜色值。

  它的作用效果是:在该滤镜控制范围内,如果像素颜色与其Color值相同,则该像素(包括图片的像素)变为透明。例如使用的语句是 FILTER:Chroma( Color=#FF0000) ,则滤镜作用范围内所有颜色为红色的像素都变为透明。

  因此我们可以用这个滤镜,把输入框的文字变为透明,然后在它背景放一幅动态的渐变色图像,就可以实现这个效果了。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

  演示中小阳用了以下这幅图片:


  这是很简单的动画,只是元件位置的移动而已,自己做一个也不难吧。下面介绍实现的代码:

  

  行了,这个效果已经做好了,比你想像的简单实用吧?其实不光是文本输入框,在很多地方都是可以同样实现在哦!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com) 
展开更多 50%)
分享

猜你喜欢

图片控制的渐变色文字

电脑网络
图片控制的渐变色文字

图片控制的渐变色文字(1)

电脑网络
图片控制的渐变色文字(1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

图片控制的渐变色文字(2)

电脑网络
图片控制的渐变色文字(2)

渐变色指甲怎么做 渐变色指甲的做法

指甲 美甲
渐变色指甲怎么做 渐变色指甲的做法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

怎么利用WPS文字制作渐变色效果背景

wps教程 办公软件 软件教程
怎么利用WPS文字制作渐变色效果背景

自染渐变色衬衣

废物利用
自染渐变色衬衣

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javascript表单之间的数据传递

javascript表单之间的数据传递

《战国无双4-2》刷技能书效率方法与视频演示分享

《战国无双4-2》刷技能书效率方法与视频演示分享
下拉加载更多内容 ↓