實現思路:
通過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特效 ,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
新聞熱點
疑難解答