一.CSS+JS实现打字机效果
1.1实现效果
1.2HTML部分
<span class="bottom-text"></span>
1.3CSS部分
.bottom-text {font-fanmily: "fangsong";display:inline-block;position:relative;font-size:20px;height:20px;inline-height:20px;color:white;
}.bottom-text::after {content:"";position:absolute;right:-10px;top:5px;height:20px;width:2px;background-color:#fff;animation: san 0.5s steps(1) infinite;
}
@keyframes san{0%,100% {background-color:#fff;}50% {background-color:transparent;}
}
1.4JS部分
<script>//页面底部打字机效果const text = document.querySelector(".bottom-text");const txt = ["你不比任何人差。","答案在风中飘荡。"];var crIndex = 0;var txtIndex = 0;var switchMode = true;setInterval(function(){if(switchMode) {text.innerHTML = txt[txtIndex].slice(0,++crIndex);}else {text.innerHTML = txt[txtIndex].slice(0,crIndex);crIndex--;}if(crIndex == txt[txtIndex].length+3) {switchMode = false;}else if (crIndex < 0) {crIndex = 0;switchMode = true;txtIndex++;if(txtIndex >= txt.length){txtIndex = 0;}}},200);</script>
