效果图:

代码如下:

</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. Spring温故而知新 – Spring AOP

    AOP的相关专业术语 通知(Advice):定义在连接点做什么 Spring中通知类型:前置通知,后置通知,返回通知,异常通知,环绕通知 连接点(JoinPoint):程序执行过程中拦截的点,Spin ...

  2. 利用AOP实现SqlSugar自动事务

    先看一下效果,带接口层的三层架构: BL层: public class StudentBL : IStudentService { private ILogger mLogger; private r ...

  3. 深夜学算法之SkipList:让链表飞

    1. 前言 上次写Python操作LevelDB时提到过,有机会要实现下SkipList.摘录下wiki介绍: 跳跃列表是一种随机化数据结构,基于并联的链表,其效率可比拟二叉查找树. 我们知道对于有序 ...

  4. 使用Docker部署Spring boot项目

    Docker是一个使用广泛的Linux容器管理工具包,它允许用户创建镜像,并将其容器实例化.通过本指南,我们可以学习到如何使用Docker部署Spring Boot项目. 先决条件 开发之前,你必须具 ...

  5. WARN: Establishing SSL connection without server's identity verification is not recommended

    0.要想用Java连接mysql数据库,首先装好JDK,配置好环境变量,将jdk*.*.*\lib放入classpath,将jdk*.*.*\bin放入path中(*.*.*表示版本号):其次安装好m ...

  6. Eclipse中导入项目后js报错解决方法

    http://blog.csdn.net/chenchunlin526/article/details/54666882 原因是因为开启了js的校验功能 不影响项目 如需去除错误标志按链接文档操作即可 ...

  7. app后端设计(9)-- 动态通知

    在app中,例如在通知界面,当新通知的时候,需要显示有多少条通知,用户点击"获取新通知"后,就能看到新的通知. 那么在app端,怎么才能知道有多少条新通知? 实现的技术有两种: 1 ...

  8. loj548 「LibreOJ β Round #7」某少女附中的体育课

    这道题好神啊!!! 发现这题就是定义了一种新的卷积,然后做k+1次卷积. 这里我们就考虑构造一个变换T,使得$T(a) \cdot T(b) =T(a∘b)$,这里是让向量右乘这个转移矩阵. 于是我们 ...

  9. BZOJ_1015_[JSOI2008]星球大战_并查集

    BZOJ_1015_[JSOI2008]星球大战_并查集 题意:很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的 机遇,一支反抗军摧毁了帝国的超级武器, ...

  10. mysql事务隔离级别和MVCC

    一.三种问题: 脏读(Drity Read):事务A更新记录但未提交,事务B查询出A未提交记录. 不可重复读(Non-repeatable read):在一个事务的两次查询之中数据不一致,这可能是两次 ...