CSS实现前端小组件随笔

本文主要是介绍CSS实现前端小组件随笔，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一.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>

这篇关于CSS实现前端小组件随笔的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---