效果图：

代码如下：

</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. vue项目中解决type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...

  2. linux模块驱动之led（ioremap）

    一:led内核驱动 (1)在编写led内核驱动时,我们首先要进行内核裁剪,因为友善之臂将LED灯的驱动默认加载到内核中,所以编写模块驱动程序前就要先把原先的LED灯驱动裁剪掉: led驱动在源码里面的 ...

  3. java的Calendar，获取月份少一月的问题及其它注意事项

    java的Calendar,获取月份少一月的问题及其它注意事项: import java.util.*; public class DateClass{ public static void main ...

  4. Android/Linux Thermal Governor之IPA分析与使用

    IPA(Intelligent Power Allocator)模型的核心是利用PID控制器,Thermal Zone的温度作为输入,可分配功耗值作为输出,调节Allocator的频率和电压值. 由P ...

  5. 你不知道的JavaScript--Item6 var预解析与函数声明提升（hoist ）

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉, ...

  6. Android TagFlowLayout完全解析 一款针对Tag的布局

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/48393217: 本文出自:[张鸿洋的博客] 一.概述 本文之前,先提一下关于上 ...

  7. ViewDragHelper实战 自己打造Drawerlayout

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47396187: 本文出自:[张鸿洋的博客] 一.概述 中间拖了蛮长时间了,在上 ...

  8. python3.5中，import sqlite3 出现 no module named _sqlite3的解决方法

    我用的centos7.2,系统自带python2.7. 我自己装了python3.5,但在导入sqlite3这个包的时候出现找不到包的错误. 下面给出解决方法. 第一种: 检查自己有没有安装sqlit ...

  9. GitHub 系列之「Git 进阶」

    1.用户名和邮箱 我们知道我们进行的每一次 commit 都会产生一条 log,这条 log 标记了提交人的姓名与邮箱,以便其他人方便的查看与联系提交人,所以我们在进行提交代码的第一步就是要设置自己的 ...

  10. Python configparser 读取指定节点内容失败

    # !/user/bin/python # -*- coding: utf-8 -*- import configparser # 生成一个config文件 config = configparser ...