css實現發光文字,以及一點點js特效


效果圖:

 

代碼如下:

</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來實現文字的發光效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM