CSS3炫酷的发光文字制作作者：课课家教育&http://www.kokojia.com点击数：13895发布时间： 09:00:08& & & 大家平常浏览一些展示型网站或者个性化网站时，有没有发现这样一些文字：当我们将鼠标滑过文字时，文字就会模拟发光动画,展现出非常酷的发光画面。这种效果就是一款基于纯3的文字发光特效，你是不是觉得这些效果很酷？你是不是想自己制作一款，但又不知道方法？没关系，下文将向大家细细讲述制作的方法。
　　下面就让我们从一张白纸开始制作这样的特效。
　　早在CSS1时代，我们就可以通过hover伪类的方式让文字在鼠标移过的时候更改颜色，来看看下面的代码：
　　注意代码红色加亮的部分，发光文字应用了glow样式。在CSS定义中，跟glow相关的样式一共有两个，分别为glow和glow:hover
　　glow定义了正常状态下的颜色为纯红(#FF0000)，而glow:hover则定义了鼠标移过时的颜色为纯白(#FFFFFF)
　　运行代码，效果如下图所示。
　　若鼠标移到发光文字上，则效果将发生如下变化。
　　然而这仅仅是简单地从一种颜色直接切换到另一种颜色，没有任何动画效果。在CSS3诞生之前，我们需要编写较为复杂的js才能实现两种状态之间的动画过渡。
　　现在，用CSS3即可轻松实现：
　　注意红色加亮的部分，我们为glow样式新增了4个属性，其值均为color2s。实际上，它们的功能完全一样，只是为了兼容不同的浏览器，无前缀的代表IE，moz前缀代表Firefox，kit前缀代表Safari和Chrome内核的浏览器，o前缀代表Opera。
　　再来看看属性值，color代表要为颜色属性添加过渡效果，2s代表过渡的总时间为两秒，两个单词用英文空格隔开。
　　再次运行，鼠标移过文字时，其颜色将从纯红缓慢地过渡到纯白，如下图所示。
　　颜色的过渡仍显得有点单调。要实现更逼真的发光效果，我们应该在文字的外边缘添加一个模糊的光圈。在CSS里，我们可以通过text-shsdow属性实现这一效果：
　　text-shw中的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移动到glow:hover样式中，同时适当缩短动画播放的时间。
　　调整后的代码如下。
　　再次运行，鼠标移到文字上，文字就会突然闪一下，然后又过渡回初始的状态，视觉冲击力较之前增强了不少。
　　我们还可以把发光效果也实现到animation上，同时实现循环播放。
　　以上代码中，linear代表匀速过渡（默认值），infinite代表无限循环，alternate代表在一次播放结束以后要倒着播一遍，从而有效避免动画直接跳回到初始状态时发生突变。
　　大家可以删除代码中的alternate观察效果的变化。
　　最后要跟大家说的是，text-shadow属性支持设置多个光圈，所以，为了让最后的效果更炫，我们可以多写几个shadow，然后光效的冲击力足以让文字不再需要有太多的颜色变化了。
　　受篇幅所限，此处只展示其中一个@keyframes定义。
　　调整好@keyframe以后，由于字体颜色没有动画了，所以glow:hover需要重新补回color:#FFFFFF这项属性。
　　再次运行，效果如下图所示。至此，这款酷炫的CSS3发光字体就大功告成了。
　　你可以按上述教程，使用更好看的字体或者自己喜欢的颜色来继续美化本实例的效果，这一步就留给大家自由发挥吧！期待你们能做出更好更炫的作品。标签：赞(5)踩(0)分享到：上一篇：下一篇：最新教程热门教程评论（）您需要登录后才可以评论请[][]最新评论暂无评论~Web开发为你推荐推荐查看热门资讯热门图书css教程_css代码_css使用技巧_css特效-专业的css博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
最近在制作一些新网站，总听人说网站制作中字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应，px是绝对单位，不支持IE的缩放，em是相对单位。那么，CSS样式表中px、em和rem单位的区别是什么呢？其使......
今天，整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。CSS代码优化的最大好处就是能够显着减少CSS文件的大小，其实还有很多其他益处，臃肿而杂乱的CSS样式表会使你遇到问题是难以调试......
CSS主要用于对HTML文件功能的补充及扩展，其作用就是对HTML文件中各种排版进行设置，达到对网页中字体、颜色、背景、图片等的控制，使网页能够完全依照设计者的想法来显示。CSS可以控制网页的显示，HTML标签中的属性也可以控制其显示，为什么还要有CSS呢？其中一个原因就是：......
对于初学css的新手朋友来说，经常会遇到这样一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢？有些朋友会发现，如果一行内容中有图片有文字......
一名专业的SEO（搜索引擎优化）有很多工作要做，其中对代码的优化是一个很关键的步骤，为了更加符合SEO优化的规范，我们就需要按照CSS+DIV的命名规则来建设我们的网站，当然这些CSS文件不用一次性全部新建出来，只需要制作到那个页面的时候再建立即可，但是在初步规划的......
整理和优化代码不仅是为了你的CSS文件大小，还包括了维护性和可读性，以上的原理并不只是针对CSS，它们还能应用到HTML，Javascript以及其他编程语言，CSS文件不只是为了呈现给你网站的最终用户，上面的原理可以帮助用户体验以及开发者经验，运用这些原则到你未来的项目......
对于一个网站来说，CSS是网站必不可少的元素之一，一方面是全新的页面布局方式；另一方面是酷炫的滤镜、颜色等视觉效果，这些CSS，备受开发者们追捧，尤其是响应式的CSS更是被杂志和博客文章铺天盖地的介绍。如果说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：......
css reset即css重置，也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，减少重复代码......
通俗的来讲，CSS3可以说是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、......
今天看到有个博友问如何清除网站页面的CSS浮动？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。 其实解决浮动引起的问题有多种方法，......
什么是CSS无图片技术？CSS无图片技术就是在不使用CSS Image（通过CSS的引入的背景图片,不包括img标签内的图片）情况下生成类似图片效果的技术；换句话的意思就是在使用纯CSS生成类似图片效果的技术。如果我们尽可能的使用无图片技术来实现，明显可以提高页面的加载速度......
CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则、简单组件、以及样式重置等代码块，其目的就是用于简化web前端开发的工作，提高工作效率，降低工作成本进行快速建站。1、CSS框架的优点。（1）、提高开发效率。（2）、规范名......
最近和几个博友一直在讨论：信息架构与用户体验是有什么不同？，信息架构和用户体验，那个才是未来网站建设……
今年五月，腾讯规模空前的架构调整中，搜索业务受到极大冲击，整个部门被打散，分块合并进其他新成立的事业……
伴随着互联网的发展，一台电脑一根网线就可以完成很多工作的情况下，工作中的固定办公地点属性也已经逐渐越……
一般来说，传统企业电商业务的经营模式主要有三种：自建团队完全自营、整体项目托盘外包和部分自营部分外包，今天，主……
团队需要发展一种成员之间互相激励和支持的氛围，在这种环境下，团队成员之间会形成一种内在的凝聚力，他们会对其他人……
常年为企业做管理咨询，逐渐发现一个有趣的事实：真正的管理大师，往往就“隐藏”在企业的某个角落里，他们可能只是一……
小时候看西游记总有一个疑问那个唐僧那么无能，为什么孙悟空非要带着他去取经呢？如果孙悟空自己去取经，不就麻烦少多……
SEO优化是针对搜索引擎规则做出优化以提高网站排名为目的的优化……
通过IIS日记的记录我们可以更加清楚的分析出搜索引擎蜘蛛在网站……
前段时间有个朋友在京东商城开通了自己的网店，偶尔间就聊到了关……
最近一直听到圈里的朋友抱怨说，自己辛辛苦苦写的文章，发表的前……
搜索引擎Spider系统的目标就是发现并抓取互联网中一切有价值的网……
白帽seo 白帽SEO就是采用公正的手法，正确的SEO的思维，合理优化……
本月热点文章拿到别人写的css代码都是属性不换行的，想请问有没有快捷的方法可以一下子改成换行的？？_百度知道
拿到别人写的css代码都是属性不换行的，想请问有没有快捷的方法可以一下子改成换行的？？
如图，就这样的，改成规范的换行格式，最快的方法。【用手打的就算了谢谢_(:з」∠)_ 多谢啦【鞠躬】
我有更好的答案
DW打开，左下格式化源代码-代码格式设置-高级格式设置CSS，每个属性位于单独的行上前面打钩，确定，运行一次格式化源代码。
采纳率：67%
来自团队：
要看你用哪个编辑器写代码了,应该都可以快捷整理代码格式
ide有自动格式化的你用的啥ide？反正一般来说不是ctrl+shift+F就是alt+shift+F或者ctrl+alt+L自己看一下ide里面的快捷键设置吧
菜单”命令“-&”应用源格式&，文档直接每行一个样式。
用DW打开，左下角有一个
格式化源代码图标，点一下之后，点应用源格式，就可以了
你用Sublime
text这个工具试试，如果成功了，记得采纳~~~~~~~
其他4条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。