效果图：

代码如下：

</head>
　　<style>
　　　　body{
　　　　　　background-color:#000;
　　　　}
　　　　.textArea{
　　　　　　font-size:100px;
　　　　　　color:#fff;
　　　　　　text-shadow:0 0 5px #e0ea33,
　　　　　　　　　　　0 0 15px #e0ea33,
　　　　　　　　　　　0 0 25px #e0ea33;
　　　　　　margin-top:200px;
　　　　　　text-align:center;
　　　　}
　　</style>

<body>
　　<p class="textArea">帅</p><!--此处是文字内容-->
</body>

<script>
　　var text=document.querySelector('.textArea');//获取到我们的P标签
　　//在鼠标指针进入到P标签上时触发
　　text.onmouseenter=function(){
　　text.innerHTML='我是你爸爸';//设置P标签之间的 HTML
　　};
　　//在鼠标指针离开P标签上时触发
　　text.onmouseleave=function(){
　　text.innerHTML='帅';//设置P标签之间的 HTML
　　};

</script>

实现思路：

通过css中的text-shadow来实现文字的发光效果

css实现发光文字,以及一点点js特效的更多相关文章

  1. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  2. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS？

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

  3. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  4. Effective前端1：能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  5. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  6. Bootstrap CSS概览代码文字标注篇

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. CSS文本与文字

    -255之间 14.2 CSS中的文字属性 属性名称                    属性值                       说明 font-style          norma ...

  8. [转]能用HTML/CSS解决的问题就不要使用JS

    原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...

  9. sublime格式化js、css、html的通用插件-html js css pretty

    sublime格式化js.css.html的通用插件-html js css pretty: 这个插件可以格式化基本上所有js html css文件,包括写在html中的js代码 ,可以在packag ...

随机推荐

  1. springboot+mybatis+redis实现分布式缓存

    大家都知道springboot项目都是微服务部署,A服务和B服务分开部署,那么它们如何更新或者获取共有模块的缓存数据,或者给A服务做分布式集群负载,如何确保A服务的所有集群都能同步公共模块的缓存数据, ...

  2. linux编译安装时常见错误解决办法

    This article is post on https://coderwall.com/p/ggmpfa 原文链接:http://www.bkjia.com/PHPjc/1008013.html ...

  3. Python +selenium自动化环境的搭建

    Python +selenium+googledriver 小白的血泪安装使,不停的总结写心得是理解透彻的毕竟之路 一,python的安装: 首先去Python的官网下载安装包:https://www ...

  4. 远程代码仓库URL地址变更后本地仓库的配置方法

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=556 今天修改了一个远程仓库的项目名称,导致Git仓库的地址发生了变化,Push代码时显示"Git仓库找不到& ...

  5. sql语句的一些案列！

    http://www.cnblogs.com/skynet/archive/2010/07/25/1784892.html

  6. CentOS安装JAVA

    http://hermosa-young.iteye.com/blog/1798026 每次都要搜索一下太麻烦了,留个底,方便以后查询 一般情况下,我们都要将linux自带的OPENJDK卸载掉,然后 ...

  7. 十九. 想快速开发app，需要找外包吗？

    健生干货分享:第19篇 摘要:最近和两位准备开发app的创业者聊天,他们之前没有移动互联网的相关经验,有的是想法和资金.他们在纠结:想快速开发app,需要找外包吗? 最近和两位想开发app的创业者聊天 ...

  8. Python简介之输入和输出

    输出 输入 输出 用print()在括号中加上字符串就可以向屏幕上输出指定的文字.比如输出'hello,world!',用代码实现如下:print('hello world!'). print()函数 ...

  9. client_v2.go

        }     return false }

  10. 【BZOJ 4010】 [HNOI2015]菜肴制作

    Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为 ...