效果圖： 代碼如下： </head> <style> body{ background-color:#000; } .textArea{ font-size:100px; color:#fff; text-shadow:0 0 5px #e0ea33, 0 0 15px #e0ea33, 0 0 2 ...
效果圖：
代碼如下：
</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來實現文字的發光效果
