循環CSS打字機效果和更改文本

Question

我需要循環瀏覽CSS打字機效果，並更改每個循環的文本。以下是我用於打字機效果的代碼。我猜我需要使用JavaScript，但我不知道如何去做這件事。關於如何做到這一點的任何想法？

.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 

 
body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    padding-top: 5em; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
/* DEMO-SPECIFIC STYLES */ 
 
.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { width: 0 } 
 
    to { width: 100% } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { border-color: transparent } 
 
    50% { border-color: blue; } 
 
}

<div class="typewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>

}

Answer 1

這可以通過jQuery做（或JavaSript，如果你喜歡）。簡單地說，等到動畫完成，然後替換包含的HTML。

setTimeout(function() { 
 
    $(".typewriter").html("<h1>This is a really cool string</h1>") 
 
},3500);

.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 

 
body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    padding-top: 5em; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
/* DEMO-SPECIFIC STYLES */ 
 
.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { width: 0 } 
 
    to { width: 100% } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { border-color: transparent } 
 
    50% { border-color: blue; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="typewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>

Answer 2

是的，你會需要一些腳本，至少檢測動畫的結尾。然後刷新html內容，可以將所有消息存儲在數組中並循環顯示。然後，您必須根據顯示的文字長度調整速度。

var messages=["message1","message2 message2 message2","message3 message3"]; 
 
var rank=0; 
 

 
// Code for Chrome, Safari and Opera 
 
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt); 
 

 
// Standard syntax 
 
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt); 
 

 
function changeTxt(e){ 
 
    _h1 = this.getElementsByTagName("h1")[0]; 
 
    _h1.style.webkitAnimation = 'none'; // set element animation to none 
 
    setTimeout(function() { // you surely want a delay before the next message appears 
 
     _h1.innerHTML=messages[rank]; 
 
     var speed =3.5*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length 
 
     _h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation  
 
     (rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message 
 
    }, 1000); 
 
}

.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 

 
body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    padding-top: 5em; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 

 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { width: 0 } 
 
    to { width: 100% } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { border-color: transparent } 
 
    50% { border-color: blue; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="typewriter" id="myTypewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>

還檢查了不同的語法https://www.w3schools.com/jsref/prop_style_animation.asp