css实现发光文字及一点点js特效

  发布时间2019-04-23 15:35:39   作者佚名   我要评论

这篇文章主要介绍了css实现发光文字及一点点js特效 ,需要的朋友可以参考下

实现思路

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

效果图

代码如下

</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实现发光文字及一点点js特效 希望?#28304;?#23478;有所帮助如果大家有任?#25105;?#38382;欢迎给我留言小编会及时回复大家的

相关文章

  • CSS3制作炫酷的自定义发光文字

    这篇文章主要为大家详细介绍了CSS3制作炫酷的自定义发光文字这是一款基于纯CSS3的文字发光特效当我们将鼠标滑过文字时文字就会模拟发光动画展现出非常酷的发光画面
    2016-03-28
  • 实现带CSS混合模式的JS视觉差轮播图特效

    这是一款实现带CSS混合模式的JS视觉差轮播图特效使用CSS mix-blend-mode将文字和?#35745;?#32972;景进行混?#24076;?#22312;点击时带有炫酷的视觉差特效
    2019-04-15
  • HTML+CSS+JS实现键盘导航源码特效

    键盘导航源码是一个HTML+CSS+JS写成的键盘导航的源码此源码的特点是键盘对应快捷键直接打开对应的网站地址欢迎下载使用
    2018-11-01
  • js和css3实现带反光特效按钮插件

    这是一款实现js和css3带反光特效按钮的插件。在鼠标移动时按钮和附近的按钮有一束光线的明暗3D效果简单炫酷欢迎下载使用
    2018-10-25
  • js和CSS3实现带详情页面的炫酷网格布局特效

    这是一款js和CSS3实现带详情页的炫酷网格布局的特效当鼠标移动到某一项上时会有文字动画的效果。当点击了某一项后会进入相应的详情页面
    2018-09-27
  • js和CSS3实现缩略图全屏展开特效源码

    这是一个实现js和CSS3的缩略图全屏展开特效的源码缩略图排列在页面的底部当用户点击缩略图之后所有缩略图会向上移动被点击?#35745;?#30340;大图会被展示出来
    2018-06-21
  • JS和CSS3实现点击展开页面动画特效

    这是一个基于js和CSS3可实现点击展开页面动画特效代码点击了按钮之后页面或沿X轴页Y轴收缩将下面的介绍页面展现出来欢迎下载
    2018-06-15

最新评论

扮扮科淫哺巷塀0369
鴻廉酔赤褒科忝栽恠米夕 圷嗄老薙兎嗄奕担貧蛍 蝕襲岷殴岾_ 酷巒11僉5篤盾 e白科柴皿 cba湿朔琵蝕琵扮寂 菜霜臭噴匯僉励360 己摩酔3襲署頁謹富 3d科同恠米夕罷周 怎科販僉9魁襲署号夸 仟刷臼噴匯僉励蝕襲潤惚 臭釦噴匯僉励悶科蝕襲潤惚臥儂潤惚 堝掴11僉5科同宥 挫塰栖峠蒙匯个 赤科app頁寔議邪議