一、翻出旧玩具,培养新感情首先,兼容的文字渐变效果,类似这样的:CSS实现兼容性的渐变、高光等文字效果或者,Chrome当道的文字渐变效果有借助mask-image实现的:CSS3下的渐变文字效果实现甚至有的文章已经介绍了渐变动画效果:CSS3 text-fill-color简介及应用展示二、..

互域东莞网络公司,专业东莞网站设计,东莞网站建设行业里很有竞争力的团队之一。

您的当前位置:互域网络 >> 网站设计知识 >> 利用CSS3制作文字渐变效果

利用CSS3制作文字渐变效果

日期:2014-02-28   来源:原创
282014-02

一、翻出旧玩具,培养新感情

以前,处于爱好,采购了很多的玩具,不管以后会不会用到。当然,我这里的玩具并不是真正的类似这样的玩具:
同事的玩具们

而是一些技术tip等。

例如,如本文所相关的效果以前就有多次收藏。

首先,兼容的文字渐变效果,类似这样的:
IE6下的文字效果 张鑫旭-鑫空间-鑫生活

原理是这样的:
兼容文字渐变原理

原文链接是这样的:
CSS实现兼容性的渐变、高光等文字效果

或者,Chrome当道的文字渐变效果——有借助mask-image实现的:
文字渐变效果-Chrome

有借助background-clip + text-fill-color实现的:
文字渐变效果-Chrome

原文链接点击后面:CSS3下的渐变文字效果实现

甚至有的文章已经介绍了渐变动画效果:CSS3 text-fill-color简介及应用展示

既然如此,可能有人会疑问了,那还说个毛线啊?难道要新瓶装旧酒,过气明星露脸刷人气?

实际上,你……说对了。就是新瓶装旧酒!

翻出一些旧玩具,培养些新感情;放些老段子,以免太冷清。

不过,人总不会无缘无故是翻箱倒柜,去寻找儿时的时光,童年的记忆的。一般按照电视剧的尿性,整理遗物啊,女朋友第一次上门啊之类的。那我的那泡尿的轨迹是?

现在的我,身在一个设计团队,自然要与各种视觉、效果打交道。啊,今天交互提出了一个效果:“可不可以让文字像脱衣服一样的,光影闪啊闪~” “当然可以啊!”虽然玩具多年未碰,但是有哪些玩具,自己还是清楚的,于是我很干脆的答应加这个效果。

于是,就去跟旧玩具叙旧。哎呀,正好发现以前的玩具是有不足的,于是,今天,就顺便老黄瓜刷绿漆,给玩具润色,修复不足,重回年轻,增进感情,星星的你。

以前文章还没这么多人看,很多好玩具都没注意到。于是,今天,乘着“新瓶装旧酒”的机会,都拉出来溜溜,顺便分享下优化后的实现方案。

二、文字遮罩→文字渐变→渐变动画

Demo先行
您可以狠狠地点击这里:文字渐变光影流动动画效果demo

下面为截图(实际效果黄色部分会不停右移,右移,右移,雪移……):
文字渐变光影动画截图

实际上,之前就有类似效果实现:text-fill-color文字遮罩动画效果demo

但是呢?之前的实现有一个不足,其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了,渐变还要使用图片,简直弱爆了,而且还是webkit家族浏览器!显然,有改进的余地。于是,就有了本文的demo.

改进实现代码如下:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {       .masked {          background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);          -webkit-text-fill-color: transparent;          -webkit-background-clip: text;          -webkit-background-size: 200% 100%;          -webkit-animation: masked-animation 4s infinite linear;      }  }  @-webkit-keyframes masked-animation {      0%  { background-position: 0 0;}      100% { background-position: -100% 0;}  }

一些说明

  1. @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { }这个查询只对webkit/blink内核浏览器有效,可以避免对其他浏览器的污染。但是呢,.masked对应的所有CSS声明都有webkit私有前缀,因此,这里的查询过滤器实际上是多余的。不过,您可以收藏下,说不定您以后就会需要这个玩具。
  2. 我这里渐变需要分成了4段,主要是为了动画循环的时候可以无缝拼接,更显自然流畅值本色。
  3. background-size: 200% 100%;让背景图片大小水平方向扩大一倍,这样background-position才有移动与变化的空间。
  4. background-clip实际上是CSS3中的标准属性,有”content“, “padding“等值。但是,这里的text却是私人珍藏玩具,其他浏览器搞不来,也不在规范之中。

以上~

匆匆忙忙想到的非图片解决方案,不一定是好的。您如果有更好的实现方法,欢迎分享。或者您现在就静下心想一想,有没有什么靠谱的idea, 然后立马写个超简demo试验下,说不定会发现新大陆。学习嘛,其实就是这么回事~~ 

三、与玩具短暂告别

跬步至千里,细流成江海。我的博客也好多年了,收藏的,积累的玩具还是很多的。我们可能有这个习惯,有什么新的或不确定的前端知识点就是MDN,或者Opera developer, 或是msdn. 其实呢,下次,不妨试试搜下右上角的搜索框,说不定会发现一些很有用的玩具!

——悄悄跟你讲,这个秘密,一般人我不告诉他!

至此,又得与玩具们暂别,然多年后重见天日,也算有所值了,哈哈!

[ 关键字:CSS3 ]


相关阅读:
  • CSS3图标图形生成技术 [04-23] 一、人生如戏、工作亦如戏,且戏且珍惜坊间有云:人生如戏,全靠演技。意思是:人生坎坎坷坷,曲曲折折,跌宕起伏,不可预知,扑朔迷离,好比是戏一..
  • CSS3的REM设置字体大小 [04-02] 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EMS优点多,还有人在说百分比方便,以至于出..


在线QQ咨询