js實現打字機效果（完整實例）

本文轉載自查看原文 2020-09-09 11:06 920

在上篇css高斯模糊的效果基礎上用js實現一個打字機效果：

上圖：

代碼：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js實現打字機效果（高斯模糊背景）</title>
<style>
    .box{
        width: 750px;
        height: 400px;
        background: url('./img/timg.jpg') no-repeat 100% 100%;
        background-size: cover;
        position: relative;
    }
    .content{
        height: 60%;
        width: 60%;
        background: white;
        position: absolute;            
        left: 50%;
        top: 50%;
        margin-left: -30%;
        margin-top: -16%;
        border-radius: 4px;
    }
    /* filter是對該元素的模糊，因此對content添加並模糊偽元素，並定位到content的下層，而不是直接修改背景圖或content的樣式 */
    .content::before{
        content: '';
        position: absolute;
        top:0;right:0;bottom:0;left:0;
        filter: blur(3px);
        margin:-21px;  
        background: url('./img/timg.jpg') no-repeat 100% 100%;
        background-size: cover;
        opacity: .8;
    }
    .content p{
        padding: 20px 15px;
        color: white;
        text-indent: 20px;
        font-size: 14px;
        line-height: 28px;
        letter-spacing: 1px;
        /* 清除子元素對父元素filter屬性值的繼承 */
        filter: blur(0);          
    }
</style>
</head>
<body>
    <div class="box">
        <div class="content" id="contents">
        </div>
    </div>
</body>
</html>
<script>
    function start(){
        let str = ' 什么是永遠？有生之年就是永遠。分手不是一定壞事，只是證明那個人不是你的地久天長。在時間線上，是有一個人在等你，時間到了，就會相遇。<br/>&nbsp;&nbsp;&nbsp;&nbsp;我好像沒有特別喜歡的事情,但是和喜歡的朋友一起隨便聊聊天,打打游戲 ,花時間做點無聊的事情,就很高興了,因為和舒服的人一起揮霍時間本身就是很輕松快樂的事情。<br/>--紅葉都楓了@163'
        let str_ = ''
        let i = 0
        let content = document.getElementById('contents')
        let timer = setInterval(()=>{
            if(str_.length<str.length){
                str_ += str[i++]
                content.innerHTML = '<p>'+str_+'_</p>'                        //打印時加光標
            }else{ 
                clearInterval(timer)
                content.innerHTML = '<p>'+str_+'</p>'
            }
        },100)
    }
    start()
</script>

免責聲明！

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

猜您在找 JS實現打字機效果 css3 實現打字機效果 cocos creator 實現打字機的效果 unity實現文本打字機效果(支持富文本) VUE——使用easy-typer-js實現打字機效果想實現前端酷炫的打字機一樣的效果嗎？ Unity 逐字顯示打字機效果 Unity UGUI打字機效果 Unity開發筆記-UGUI Text通過修改頂點顏色實現打字機效果 css3線條圍繞跑馬+jquery打字機效果