图片控制的渐变色文字

2016-01-29 11:33 12 1 收藏

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

【 tulaoshi.com - Javascript 】

 

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


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

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

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

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

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

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

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


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

  

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

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

来源:http://www.tulaoshi.com/n/20160129/1482615.html

延伸阅读
    注:如本网转载的文章涉及版权等问题,请作者与我联系,我将在第一时间删除。谢谢!     Note: If my site reproduced of copyright issues, please contact me on, I will delete the first time. tulaoShi.comThank you!     联络邮箱(Contact E-mail):wzskynet#163.com   &...
标签: Illustrator
FreeHand 制作包含渐变色的曲线      前 言 适合于freehand7及更高版本。 这是一个很简单的小技巧,介绍如何将一个混合渐变对象填充到一个封闭对象内部。 步骤一: 如上图,我想在字母 s 中填充由5个色块构成的渐变色。当然首先我要把字母 s 转成曲线。 步骤二: 首先将上图中的 5 个色块混合,要保证足够的步数以...
本教程介绍化妆瓶的制作方法。制作过程中大多用到渐变色,从盖子的瓶身的质感都是用渐变来体现。教程需要使用CS2及以上版本。 最终效果 图1 图2 1、新建一个背景为白色的文件,选择圆角矩形工具,圆角半径为8个像素,画出瓶身的形状。 图3 2、新建一个图层,命名为"瓶身"。选择渐变工具,方式为线性,设置如下渐...
标签: 礼物
看到这种渐变裤袜了吗?是不是非常的吸引眼球呢,美女们看了都会心动吧?     第一步:我们先准备一条白色的裤袜,对着水龙头轻轻搓一会 第二步:在火中烧一桶水,开了之后关火,倒入些许染料,再将丝袜整个放下去搅拌着色均匀。     ...
标签: PS PS基础
前段时间有朋友问这个效果怎样实现的,今天我简单写一下教程,希望对大家有用,还有如果大家对页面中的什么效果感到疑惑,就请留言给我,我会尽力发上教程来和大家分享的。 首先看一下最终效果和分层: 1、 背景色设置为#280021,新建图层,利用钢笔工具画如下图形,填充颜色,然后图层样式中的渐变叠加设置如下: 2、 新建图层,...

经验教程

968

收藏

63
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部