效果图：

代码如下：

</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. redis两种持久化方法对比分析

    1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...

  2. 深入NGINX：nginx高性能的实现原理

    深入NGINX:我们如何设计它的性能和扩展性 来源: cnBeta  原文链接 英文原文:Inside NGINX: How We Designed for Performance & Sca ...

  3. idea 和 eclipse 常用快捷键汇总

    序号 所属类别 快捷键名称 快键键方式 备注 所属平台 1 查询类 search everywhere double shift    idea 2 全文搜索 ctrl + H   通用 3 打开资源 ...

  4. Invalid character found in method name. HTTP method names must be tokens

      o.apache.coyote.http11.Http11Processor : Error parsing HTTP request header Note: further occurrenc ...

  5. http cookie管理中cookie police下部分参数含意

      1.compatibility:推荐选择此种策略.这种兼容性设计要求是适应尽可能多的不同的服务器,尽管不是完全按照标准来实现的.如果你遇到了解析 Cookies 的问题,你就可能要用到这一个规范. ...

  6. oracle+mybatis 使用动态Sql在要insert的字段不确定的情况下实现批量insert

    最近做项目遇到一个挺操蛋的问题,由于业务的关系,DB的数据表无法确定,在使用过程中字段可能会增加,这样在insert时给我造成了很大的困扰. 先来看一下最终我是怎么实现的: <insert id ...

  7. nagios监控mysql主机,nginx,磁盘IO,网卡流量

    http://blog.chinaunix.net/uid-28685162-id-3506260.html nagios安装完成,打开/usr/local/nagios/etc/nagios.cfg ...

  8. http2.0与http1.X的区别

    此文只是方便重看,原文在:http://www.mamicode.com/info-detail-1199706.html 1.1 HTTP应用场景 http诞生之初主要是应用于web端内容获取,那时 ...

  9. Intellij Idea中如何debug本地maven项目

    方法一:使用maven中的jetty插件调试本地maven项目 1.打断点 2.右击"jetty:run",选择Debug运行 3.浏览器发送http请求,开始调试 方法二:利用远 ...

  10. 电脑不识别U盘

    最近遇到这样一个问题,现把具体问题和解决方案给大家分享一下: 系统:win10 症状:插入U盘,系统提示插入U盘的声音提示,磁盘不显示,360 无图标 原因:USB驱动出现问题 对症下药: 插入U盘右 ...