實現【打字機動畫】的兩種辦法
阿新 • • 發佈:2017-11-19
很多 inner 技術分享 兩種 方式 使用 sna 寬度 images
打字機動畫是一個很常見的動畫效果,實現的方式也有很多
最近在項目中剛好遇到了類似的需求,整理了幾個實現動畫的方法,分享一下~
方法一、
效果最好的打字機動畫
通過 js 的定時器增減文字,單獨用一個標簽來寫光標動畫,這樣即使文字換行也能良好呈現
HTML
<div class="typing"> <span class="typing-text">這是一個傳說中的打字動畫</span> <i class="caret"></i> </div>
CSS
.caret::after{ content: ""; display: inline-block; width: 2px; height: 1em; margin-bottom: -2px; margin-left: -2px; background-color: #333; animation: blink-caret .5s step-end infinite; } @keyframes blink-caret { 50% {opacity: 0;} }
JS
var box = document.getElementsByClassName(‘typing-text‘)[0]; var str = box.innerText; var i = 0; box.innerText = ‘‘; var typing = setInterval(function() { box.innerText += str[i++]; i >= str.length && clearInterval(typing); }, 200);
方法二、
在網上找的方法,純 CSS3 做的動畫
通過限定寬度配合 overflow:hidden 來實現文字添加的效果,使用 border 做光標
<style type="text/css"> .typing { border-right: .1em solid; width: 9em; /*寬度為“字數 + em”*/ white-space: nowrap; overflow: hidden; animation: typing 5s steps(9, end), /*步數為字數*/ blink-caret .5s step-end infinite alternate; } @keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } } </style> <div class="typing">這是一個打字機動畫</div>
這種辦法的優點就是不用寫 js,但有很多的局限性:
比如文字不能自動換行,元素寬度還需要手動設置
當文字是英文的時候,必須使用 Consolas 之類的等寬字體
實現【打字機動畫】的兩種辦法