css實(shí)現(xiàn)發(fā)光文字及一點(diǎn)點(diǎn)js特效

發(fā)布時(shí)間：2019-04-23 15:35:39 作者：佚名

我要評(píng)論

這篇文章主要介紹了css實(shí)現(xiàn)發(fā)光文字及一點(diǎn)點(diǎn)js特效 ,需要的朋友可以參考下

實(shí)現(xiàn)思路：

通過css中的text-shadow來實(shí)現(xiàn)文字的發(fā)光效果

效果圖：

代碼如下：

</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><!--此處是文字內(nèi)容-->
 </body>
<script>
　　var text=document.querySelector('.textArea');//獲取到我們的P標(biāo)簽
 　　//在鼠標(biāo)指針進(jìn)入到P標(biāo)簽上時(shí)觸發(fā)
 　　text.onmouseenter=function(){
　　text.innerHTML='我是你爸爸';//設(shè)置P標(biāo)簽之間的 HTML
　　};
　　//在鼠標(biāo)指針離開P標(biāo)簽上時(shí)觸發(fā)
 　　text.onmouseleave=function(){
　　text.innerHTML='帥';//設(shè)置P標(biāo)簽之間的 HTML
　　};
</script>

總結(jié)

以上所述是小編給大家介紹的css實(shí)現(xiàn)發(fā)光文字及一點(diǎn)點(diǎn)js特效，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

Tag：css 發(fā)光文字特效

相關(guān)文章

CSS3制作炫酷的自定義發(fā)光文字
這篇文章主要為大家詳細(xì)介紹了CSS3制作炫酷的自定義發(fā)光文字，這是一款基于純CSS3的文字發(fā)光特效，當(dāng)我們將鼠標(biāo)滑過文字時(shí)，文字就會(huì)模擬發(fā)光動(dòng)畫，展現(xiàn)出非常酷的發(fā)光畫面
2016-03-28
實(shí)現(xiàn)帶CSS混合模式的JS視覺差輪播圖特效
這是一款實(shí)現(xiàn)帶CSS混合模式的JS視覺差輪播圖特效，使用CSS mix-blend-mode將文字和圖片背景進(jìn)行混合，在點(diǎn)擊時(shí)帶有炫酷的視覺差特效
2019-04-15
HTML+CSS+JS實(shí)現(xiàn)鍵盤導(dǎo)航源碼特效
鍵盤導(dǎo)航源碼是一個(gè)HTML+CSS+JS寫成的鍵盤導(dǎo)航的源碼，此源碼的特點(diǎn)是鍵盤對(duì)應(yīng)快捷鍵直接打開對(duì)應(yīng)的網(wǎng)站地址，歡迎下載使用
2018-11-01
js和css3實(shí)現(xiàn)帶反光特效按鈕插件
這是一款實(shí)現(xiàn)js和css3帶反光特效按鈕的插件。在鼠標(biāo)移動(dòng)時(shí)，按鈕和附近的按鈕有一束光線的明暗3D效果，簡單炫酷，歡迎下載使用
2018-10-25
js和CSS3實(shí)現(xiàn)帶詳情頁面的炫酷網(wǎng)格布局特效
這是一款js和CSS3實(shí)現(xiàn)帶詳情頁的炫酷網(wǎng)格布局的特效，當(dāng)鼠標(biāo)移動(dòng)到某一項(xiàng)上時(shí)，會(huì)有文字動(dòng)畫的效果。當(dāng)點(diǎn)擊了某一項(xiàng)后，會(huì)進(jìn)入相應(yīng)的詳情頁面
2018-09-27
js和CSS3實(shí)現(xiàn)縮略圖全屏展開特效源碼
這是一個(gè)實(shí)現(xiàn)js和CSS3的縮略圖全屏展開特效的源碼，縮略圖排列在頁面的底部，當(dāng)用戶點(diǎn)擊縮略圖之后，所有縮略圖會(huì)向上移動(dòng)，被點(diǎn)擊圖片的大圖會(huì)被展示出來
2018-06-21
JS和CSS3實(shí)現(xiàn)點(diǎn)擊展開頁面動(dòng)畫特效
這是一個(gè)基于js和CSS3可實(shí)現(xiàn)點(diǎn)擊展開頁面動(dòng)畫特效代碼，點(diǎn)擊了按鈕之后，頁面或沿X軸頁Y軸收縮，將下面的介紹頁面展現(xiàn)出來，歡迎下載
2018-06-15