js如何實作文字閃爍特效? (圖文+影片)

藏色散人
發布: 2019-11-30 16:39:05
原創
7799 人瀏覽過

本篇文章主要介紹如何用js實作文字閃爍特效

我們在前端頁面設計過程中,加入一些動態特效顯然能夠使網站內容更加豐富,並且也更加美觀,能夠吸引用戶矚目。

對於前端新手來說,使用js實現一些特效或許有一定難度,但其實也是非常簡單的。

下面我們就透過簡單的程式碼範例,介紹js實作文字閃爍的特效方法。 【更多js特效,可存取js特效程式碼下載欄位查看】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现文字闪烁特效</title>
</head>
<body>
<div id="blink">PHP中文网</div>
</body>
<script language="javascript">
    function changeColor() {
        var color = [&#39;#F96&#39;,&#39;#cc6&#39;];
        // parseInt 将字符串类型转换为整型  random 获取0-1之间的随机数   color.length color数组的长度
 document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
    }
    // 执行定义好的changeColor方法,200毫秒执行一下
 setInterval("changeColor()", 200);
</script>
<style>
    * {
        color: #CC6
 }
</style>
</html>
登入後複製

最終效果如下圖:

js如何實作文字閃爍特效? (圖文+影片)

# #這篇文章就是關於

js實作文字閃爍效果的方法介紹,也是非常簡單易懂,希望對需要的朋友有幫助!

更多酷javascript特效程式碼,盡在:

javascript特效大全

想要了解更多前端相關知識,可以關注PHP中文網

JavaScript影片教學HTML影片教學CSS影片教學Bootstrap影片教學等等相關教程,歡迎大家參考學習!

以上是js如何實作文字閃爍特效? (圖文+影片)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板