当前位置： 移动技术网 > IT编程>网页制作>CSS > css实现发光文字,以及一点点js特效

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

2019年04月17日  | 移动技术网IT编程  | 我要评论

八哥电影网站,自找死路,杭州汇通快递电话

效果图：

 

代码如下：

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网