效果图：

代码如下：

</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. CSS层叠和继承

    CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...

  2. 微信小程序-获取地理位置

    近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...

  3. PHP 7 新特性

    PHP 7 新特性 标量类型声明 PHP 7 中的函数的形参类型声明可以是标量了.在 PHP 5 中只能是类名.接口.array 或者 callable (PHP 5.4,即可以是函数,包括匿名函数) ...

  4. mac终端命令及pycharm常用快捷键记录

    mac终端命令: 1.root权限 $sudo su - 2.定位到指定文件夹位置 $cd /Users/计算机名称/Desktop     (定位到桌面) 3.新建文件夹 $mkdir 文件夹名称 ...

  5. MyBatis系列目录--5. MyBatis一级缓存和二级缓存(redis实现)

    转载请注明出处哈:http://carlosfu.iteye.com/blog/2238662 0. 相关知识: 查询缓存:绝大数系统主要是读多写少. 缓存作用:减轻数据库压力,提供访问速度. 1. ...

  6. 用nginx缓存静态文件

        这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件) ...

  7. Ubuntu物理机中解决VirtualBox虚拟机无法连接USB设备的问题

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=611 问题描述: 在安装完VirtualBox的USB控制器扩展(关于在VirtualBox中安装USB控制器扩展的 ...

  8. 微信公众号开发 包括服务器配置、java web项目搭建、tomcat手动发布web项目、微信开发所需的url和token验证 2017.12.2

    https://www.cnblogs.com/klmei/p/7060879.html  基础配置很全面

  9. thinter中lable标签控件（二）

    lable控件 对于tkinter来说,学起来很简单,只要设置好相应的参数即可出结果,所以不用刻意去记住这些参数.学习一遍后理解每个参数的作用是什么即可. 当下次用到的时候来笔记上看一下就行. 内容很 ...

  10. js中函数的写法

    js提供了灵活的函数写法,我们常见的函数写法和调用可能是: function ask(){ console.log(1); } ask(); 这样就完成了函数的定义和调用,司空见惯. 还有js里面的匿 ...