打字效果动画的4种实现方法(超简单)

<h1 class="typing typing-item">打字动画打字动画打字动画</h1>

.typing{ font-size: 1rem; padding-top: 6%; margin-bottom: 5%; font-weight: normal; letter-spacing: .3rem; -webkit-animation: type 2s steps(50, end) forwards; animation: type 2s steps(50, end) forwards;}.typing-item{ text-align: center; color: black; width:100%; white-space:nowrap; overflow:hidden;}@-webkit-keyframes type{ from { width: 0;}}@keyframes type{ from { width: 0;}}

<div class="text-container"> <span class="text-static"></span> <span class="text"></span> <span class="cursor">|</span></div>

<script type="text/javascript" src="../js/jquery.js"></script><script>  $(function() {   myPrint(["hello my word!"], 100);   function myPrint(arr, speed) {    var index = 0;    var str = arr[index];    var i = 0;    var add = true;    var mySetInterval = setInterval(function() {     // 延时4个字符的时间     if (i == str.length + 4) {      add = false;      // 如果是最后一个字符串则终止循环函数      if (index + 1 >= arr.length) {       clearInterval(mySetInterval);      }     } else if (i == -2) {      // 删除后延时2个字符的时间      add = true;      str = arr[++index];     }     setTimeout(function() {      if (add) {       i++;       $(".text").html(str.substring(0, i));      } else {       $(".text").html(str.substring(0, i - 1));       i--;      }     })    }, speed)   }  }) </script>

<div class="content"> <div class="content-div">  <span id="content-item"></span> </div></div><input type="hidden" id="content" value="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" />

// The MIT License (MIT)// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com// Permission is hereby granted, free of charge, to any person obtaining a copy// of this software and associated documentation files (the "Software"), to deal// in the Software without restriction, including without limitation the rights// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell// copies of the Software, and to permit persons to whom the Software is// furnished to do so, subject to the following conditions:// The above copyright notice and this permission notice shall be included in// all copies or substantial portions of the Software.// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN// THE SOFTWARE.! function($) { "use strict"; var Typed = function(el, options) {  // chosen element to manipulate text  this.el = $(el);  // options  this.options = $.extend({}, $.fn.typed.defaults, options);  // attribute to type into  this.isInput = this.el.is('input');  this.attr = this.options.attr;  // show cursor  this.showCursor = this.isInput ? false : this.options.showCursor;  // text content of element  this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text()  // html or plain text  this.contentType = this.options.contentType;  // typing speed  this.typeSpeed = this.options.typeSpeed;  // add a delay before typing starts  this.startDelay = this.options.startDelay;  // backspacing speed  this.backSpeed = this.options.backSpeed;  // amount of time to wait before backspacing  this.backDelay = this.options.backDelay;  // input strings of text  this.strings = this.options.strings;  // character number position of current string  this.strPos = 0;  // current array position  this.arrayPos = 0;  // number to stop backspacing on.  // default 0, can change depending on how many chars  // you want to remove at the time  this.stopNum = 0;  // Looping logic  this.loop = this.options.loop;  this.loopCount = this.options.loopCount;  this.curLoop = 0;  // for stopping  this.stop = false;  // custom cursor  this.cursorChar = this.options.cursorChar;  // shuffle the strings  this.shuffle = this.options.shuffle;  // the order of strings  this.sequence = [];  // All systems go!  this.build(); }; Typed.prototype = {  constructor: Typed  ,  init: function() {   // begin the loop w/ first current string (global self.string)   // current string will be passed as an argument each time after this   var self = this;   self.timeout = setTimeout(function() {    for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;    // shuffle the array if true    if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);    // Start typing    self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);   }, self.startDelay);  }  ,  build: function() {   // Insert cursor   if (this.showCursor === true) {    this.cursor = $("<span class=/"typed-cursor/">" + this.cursorChar + "</span>");    this.el.after(this.cursor);   }   this.init();  }  // pass current string state to each function, types 1 char per call  ,  typewrite: function(curString, curStrPos) {   // exit when stopped   if (this.stop === true) {    return;   }   // varying values for setTimeout during typing   // can't be global since number changes each time loop is executed   var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;   var self = this;   // ------------- optional ------------- //   // backpaces a certain string faster   // ------------------------------------ //   // if (self.arrayPos == 1){   // self.backDelay = 50;   // }   // else{ self.backDelay = 500; }   // contain typing function in a timeout humanize'd delay   self.timeout = setTimeout(function() {    // check for an escape character before a pause value    // format: /^/d+ .. eg: ^1000 .. should be able to print the ^ too using ^^    // single ^ are removed from string    var charPause = 0;    var substr = curString.substr(curStrPos);    if (substr.charAt(0) === '^') {     var skip = 1; // skip atleast 1     if (/^/^/d+/.test(substr)) {      substr = //d+/.exec(substr)[0];      skip += substr.length;      charPause = parseInt(substr);     }     // strip out the escape character and pause value so they're not printed     curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);    }    if (self.contentType === 'html') {     // skip over html tags while typing     var curChar = curString.substr(curStrPos).charAt(0)     if (curChar === '<' || curChar === '&') {      var tag = '';      var endTag = '';      if (curChar === '<') {       endTag = '>'      } else {       endTag = ';'      }      while (curString.substr(curStrPos).charAt(0) !== endTag) {       tag += curString.substr(curStrPos).charAt(0);       curStrPos++;      }      curStrPos++;      tag += endTag;     }    }    // timeout for any pause after a character    self.timeout = setTimeout(function() {     if (curStrPos === curString.length) {      // fires callback function      self.options.onStringTyped(self.arrayPos);      // is this the final string      if (self.arrayPos === self.strings.length - 1) {       // animation that occurs on the last typed string       self.options.callback();       self.curLoop++;       // quit if we wont loop back       if (self.loop === false || self.curLoop === self.loopCount)        return;      }      self.timeout = setTimeout(function() {       self.backspace(curString, curStrPos);      }, self.backDelay);     } else {      /* call before functions if applicable */      if (curStrPos === 0)       self.options.preStringTyped(self.arrayPos);      // start typing each new char into existing string      // curString: arg, self.el.html: original text inside element      var nextString = curString.substr(0, curStrPos + 1);      if (self.attr) {       self.el.attr(self.attr, nextString);      } else {       if (self.isInput) {        self.el.val(nextString);       } else if (self.contentType === 'html') {        self.el.html(nextString);       } else {        self.el.text(nextString);       }      }      // add characters one by one      curStrPos++;      // loop the function      self.typewrite(curString, curStrPos);     }     // end of character pause    }, charPause);    // humanized value for typing   }, humanize);  }  ,  backspace: function(curString, curStrPos) {   // exit when stopped   if (this.stop === true) {    return;   }   // varying values for setTimeout during typing   // can't be global since number changes each time loop is executed   var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;   var self = this;   self.timeout = setTimeout(function() {    // ----- this part is optional ----- //    // check string array position    // on the first string, only delete one word    // the stopNum actually represents the amount of chars to    // keep in the current string. In my case it's 14.    // if (self.arrayPos == 1){    // self.stopNum = 14;    // }    //every other time, delete the whole typed string    // else{    // self.stopNum = 0;    // }    if (self.contentType === 'html') {     // skip over html tags while backspacing     if (curString.substr(curStrPos).charAt(0) === '>') {      var tag = '';      while (curString.substr(curStrPos).charAt(0) !== '<') {       tag -= curString.substr(curStrPos).charAt(0);       curStrPos--;      }      curStrPos--;      tag += '<';     }    }    // ----- continue important stuff ----- //    // replace text with base text + typed characters    var nextString = curString.substr(0, curStrPos);    if (self.attr) {     self.el.attr(self.attr, nextString);    } else {     if (self.isInput) {      self.el.val(nextString);     } else if (self.contentType === 'html') {      self.el.html(nextString);     } else {      self.el.text(nextString);     }    }    // if the number (id of character in current string) is    // less than the stop number, keep going    if (curStrPos > self.stopNum) {     // subtract characters one by one     curStrPos--;     // loop the function     self.backspace(curString, curStrPos);    }    // if the stop number has been reached, increase    // array position to next string    else if (curStrPos <= self.stopNum) {     self.arrayPos++;     if (self.arrayPos === self.strings.length) {      self.arrayPos = 0;      // Shuffle sequence again      if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);      self.init();     } else      self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);    }    // humanized value for typing   }, humanize);  }  /**   * Shuffles the numbers in the given array.   * @param {Array} array   * @returns {Array}   */  ,shuffleArray: function(array) {   var tmp, current, top = array.length;   if(top) while(--top) {    current = Math.floor(Math.random() * (top + 1));    tmp = array[current];    array[current] = array[top];    array[top] = tmp;   }   return array;  }  // Start & Stop currently not working  // , stop: function() {  //  var self = this;  //  self.stop = true;  //  clearInterval(self.timeout);  // }  // , start: function() {  //  var self = this;  //  if(self.stop === false)  //  return;  //  this.stop = false;  //  this.init();  // }  // Reset and rebuild the element  ,  reset: function() {   var self = this;   clearInterval(self.timeout);   var id = this.el.attr('id');   this.el.after('<span id="' + id + '"/>')   this.el.remove();   if (typeof this.cursor !== 'undefined') {    this.cursor.remove();   }   // Send the callback   self.options.resetCallback();  } }; $.fn.typed = function(option) {  return this.each(function() {   var $this = $(this),    data = $this.data('typed'),    options = typeof option == 'object' && option;   if (!data) $this.data('typed', (data = new Typed(this, options)));   if (typeof option == 'string') data[option]();  }); }; $.fn.typed.defaults = {  strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],  // typing speed  typeSpeed: 0,  // time before typing starts  startDelay: 0,  // backspacing speed  backSpeed: 0,  // shuffle the strings  shuffle: false,  // time before backspacing  backDelay: 500,  // loop  loop: false,  // false = infinite  loopCount: false,  // show cursor  showCursor: true,  // character for cursor  cursorChar: "|",  // attribute to type (null == text)  attr: null,  // either html or text  contentType: 'html',  // call when done callback function  callback: function() {},  // starting callback function before each string  preStringTyped: function() {},  //callback for every typed string  onStringTyped: function() {},  // callback for reset  resetCallback: function() {} };}(window.jQuery);

var string = $('#content').val();$('#content-item').typed({ strings: ["　　" + string], typeSpeed: 50, backDelay: 800, loop: false, loopCount: false});

<script> var str = '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'; var i = 0; function typing(){  var divTyping = document.getElementById('typing');  if (i <= str.length) {   divTyping.innerHTML = str.slice(0, i++) + '_';   setTimeout('typing()', 200);  }  else{   divTyping.innerHTML = str;  } } typing();</script>