欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > CSS3制作炫酷的发光文字实例
这篇文章主要为大家详细介绍了CSS3制作炫酷的发光文字实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

   人类对发光的物体,对那些bling、bling的东西都是有特殊关注的,所有很多网站设计师在网站制作的时候就掏空心思的想做这样的一种文字发光效果。有的朋友可能在一些网站看到过:当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面。这种效果就是一款基于纯css3的文字发光特效,你是不是觉得这些效果很酷?你是不是想自己制作一款,但又不知道方法?没关系,下文361模板将向大家细细讲述制作的方法。

CSS3炫酷的发光文字制作_css3教程_html代码_css3代码

  下面就让我们从一张白纸开始制作这样的特效。

  早在CSS1时代,我们就可以通过hover伪类的方式让文字在鼠标移过的时候更改颜色,来看看下面的html代码:

代码1

  注意代码红色加亮的部分,发光文字应用了glow样式。在CSS定义中,跟glow相关的样式一共有两个,分别为glow和glow:hover

  glow定义了正常状态下的颜色为纯红(#FF0000),而glow:hover则定义了鼠标移过时的颜色为纯白(#FFFFFF)

  运行代码,效果如下图所示。

初始颜色为纯红

  若鼠标移到发光文字上,则效果将发生如下变化。

鼠标经过时,颜色变为白色

  然而这仅仅是简单地从一种颜色直接切换到另一种颜色,没有任何动画效果。在CSS3诞生之前,我们需要编写较为复杂的js才能实现两种状态之间的动画过渡。

  现在,用CSS3即可轻松实现:

动画过渡代码

  注意红色加亮的部分,我们为glow样式新增了4个属性,其值均为color2s。实际上,它们的功能完全一样,只是为了兼容不同的浏览器,无前缀的代表IE,moz前缀代表Firefox,webkit前缀代表Safari和Chrome内核的浏览器,o前缀代表Opera。

  再来看看属性值,color代表要为颜色属性添加过渡效果,2s代表过渡的总时间为两秒,两个单词用英文空格隔开。

  再次运行,鼠标移过文字时,其颜色将从纯红缓慢地过渡到纯白,如下图所示。

从纯红过渡到纯白

  颜色的过渡仍显得有点单调。要实现更逼真的发光效果,我们应该在文字的外边缘添加一个模糊的光圈。在CSS里,我们可以通过text-shsdow属性实现这一效果:

在文字的外边缘添加一个模糊的光圈

  text-shADOw中的4个数值分别代表x方向上的偏移,y方向上的偏移,发光大小和发光颜色,它们用英文空格隔开。

  再次运行,效果如下图所示。

为文字添加发光特效后的效果

  为了实现鼠标移过的时候才显示发光,我们应该把text-shadow属性移动到glow:hover样式中,同时为text-shadow添加过渡:

实现鼠标移过的时候才显示发光代码 

  要实现多个属性同时过渡,方法是用英文逗号进行分隔。

  再次运行,效果如下图所示。

鼠标未移到文字上的效果,文字颜色未发生变化,并且不显示光圈

  鼠标移到文字上,文字将缓慢过渡为纯白,同时扩散出橙色的光圈,如下图所示。

鼠标移到文字上的效果,文字颜色过渡到纯白,并且光圈逐渐淡入

  缓慢过渡给人的感觉比较温和。如果要加强视觉冲击力,实现诸如闪亮登场的效果,那我们就需要调整过渡的方式,让鼠标移过的时候有一个突变。

  这时候,transition反而不好使了,去掉的话又没有动画效果,怎么办?

  不用担心,CSS3还为我们提供了另一个更强大的动画属性:animation。

  学习animation需要了解@keyframes规则,具体如下。

  

@keyframes tween{
  from{color:#FF0000;}
  to{color:#FFFFFF;}
  }

  其中from定义初始时的状态,to定义结束时的状态。

  跟transition相类似,@keyframes也需要兼容多浏览器。

 

 @keyframes tween
  @-moz-keyframes tween
  @-webkit-keyframes tween
  @-o-keyframes tween

  定义好@keyframes以后,我们通过animation把@keyframes绑定进去,代码如下。

通过animation把@keyframes绑定代码

  再次运行,文字从纯白变到纯红的动画自动播放,无需鼠标移到文字上面。

  为了让动画在鼠标移到文字上面才播放,我们应该把animation移动到glow:hover样式中,同时适当缩短动画播放的时间。

  调整后的代码如下。

颜色变化代码

  再次运行,鼠标移到文字上,文字就会突然闪一下,然后又过渡回初始的状态,视觉冲击力较之前增强了不少。

  我们还可以把发光效果也实现到animation上,同时实现循环播放。

光圈效果变化代码

  以上代码中,linear代表匀速过渡(默认值),infinite代表无限循环,alternate代表在一次播放结束以后要倒着播一遍,从而有效避免动画直接跳回到初始状态时发生突变。

  大家可以删除代码中的alternate观察效果的变化。

  最后要跟大家说的是,text-shadow属性支持设置多个光圈,所以,为了让最后的效果更炫,我们可以多写几个shadow,然后光效的冲击力足以让文字不再需要有太多的颜色变化了。

  受篇幅所限,此处只展示其中一个@keyframes定义。

加多几层光圈代码

  调整好@keyframe以后,由于字体颜色没有动画了,所以glow:hover需要重新补回color:#FFFFFF这项属性。

  再次运行,效果如下图所示。至此,这款酷炫的CSS3发光字体就大功告成了。

最后效果图

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: CSS3 发光文字 html代码 CSS3代码

上一篇织梦DEDEcms调用当前顶级栏目名称、ID、url方法

下一篇织梦DEDECMS关键词链接过长无法显示的解决方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在