一.CSS+JS实现打字机效果
1.1实现效果
1.2HTML部分
html
<span class="bottom-text"></span>
1.3CSS部分
css
.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部分
javascript
<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>