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

番茄西红柿发布于2019-04-22 16:12 / 1198人阅读

摘要：效果图代码如下帅此处是文字内容获取到我们的标签在鼠标指针进入到标签上时触发我是你爸爸设置标签之间的在鼠标指针离开标签上时触发帅设置标签之间的实现思路通过中的来实现文字的发光效果

效果图：

代码如下：

/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 帅 /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来实现文字的发光效果

专线服务私有云发光文字文字外发光html js实现抽屉特效 js实现特效数字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/787.html

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

摘要：效果图代码如下帅此处是文字内容获取到我们的标签在鼠标指针进入到标签上时触发我是你爸爸设置标签之间的在鼠标指针离开标签上时触发帅设置标签之间的实现思路通过中的来实现文字的发光效果效果图：代码如下： /head style body{ background-color:#000; } .textArea{ font-size:100px; color:#fff; text-s...

番茄西红柿 2019-04-22 17:02 评论0 收藏0
css实现发光文字,以及一点点js特效

摘要：效果图代码如下帅此处是文字内容获取到我们的标签在鼠标指针进入到标签上时触发我是你爸爸设置标签之间的在鼠标指针离开标签上时触发帅设置标签之间的实现思路通过中的来实现文字的发光效果效果图：代码如下： /head style body{ background-color:#000; } .textArea{ font-size:100px; color:#fff; text-s...

番茄西红柿 2019-04-22 16:34 评论0 收藏0
css实现发光文字,以及一点点js特效

摘要：效果图代码如下帅此处是文字内容获取到我们的标签在鼠标指针进入到标签上时触发我是你爸爸设置标签之间的在鼠标指针离开标签上时触发帅设置标签之间的实现思路通过中的来实现文字的发光效果效果图：代码如下：　　　　　　body{ 　　　　　　background-color:#000; 　　　　} 　　　　.textArea{ 　　　　　　font-size:100px; ...

番茄西红柿 2019-04-23 11:40 评论0 收藏0
css实现发光文字,以及一点点js特效

摘要：效果图代码如下帅此处是文字内容获取到我们的标签在鼠标指针进入到标签上时触发我是你爸爸设置标签之间的在鼠标指针离开标签上时触发帅设置标签之间的实现思路通过中的来实现文字的发光效果效果图：代码如下：　　　　　　body{ 　　　　　　background-color:#000; 　　　　} 　　　　.textArea{ 　　　　　　font-size:100px; ...

番茄西红柿 2019-04-22 19:50 评论0 收藏0