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

上一篇: 详解CSS实现仿Windows10鼠标照亮... 下一篇:用css实现正方形div 的两种方法

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

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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特效，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

脚本宝典总结

以上是脚本宝典为你收集整理的css实现发光文字及一点点js特效全部内容，希望文章能够帮你解决css实现发光文字及一点点js特效所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：js js

上一篇: 详解CSS实现仿Windows10鼠标照亮... 下一篇:用css实现正方形div 的两种方法

猜你在找的CSS相关文章