不使用jquery實現js打字效果示例分享

 js打字效果示例js打字效果示例,data-period設置從打字返回刪字的時間，data-rotate可加減中英文詞語，不用jquery支持

      代碼如下: <h1>Libraries give you  <span class="txt-rotate fw700" data-period=500" data-rotate='[ "knowledge", "community", "an outlet", "中國起源", "OSCHINA" ]'></span></h1>       代碼如下: html,body {   font-family: 'Open Sans', 'Helvetica Neue', sans-serif;   padding: 3em 2em;   font-size: 18px;   background: #fff;   color: #009966; }   h1,h2 {   font-weight: 300;   margin: 0.4em 0; } h1 { font-size: 3.5em; } h2 { font-size: 2.5em; font-weight: 700; color: #505050; } h3 {   color: #505050;   font-size: 1.5em; } .fw700 {   font-weight: 700; } input {   font-size: 100%;   background: #fff;   border: none;   color: #000;   padding: 12px;   margin: 0 -0.25em 0 0.3em;   border-top-left-radius: 9px;   border-bottom-left-radius: 9px;   box-shadow: 0 0 5px rgba(0,0,0,0.5) inset; } #call {   border-top-right-radius: none;   border-radius: none; } ::-webkit-input-placeholder {    color: #222; }   :-moz-placeholder { /* Firefox 18- */    color: #222;   }   ::-moz-placeholder {  /* Firefox 19+ */    color: #222;   }   :-ms-input-placeholder {      color: #222;   }   .inline {   display: inline; }   .button {   display: inline-block;   background: #009966;   color: #fff;   font-weight: 700;   text-decoration: none;   padding: 0.44em 0.89em 0.39em;   margin: 0 1em 0 0;   border-top-right-radius: 9px;   border-bottom-right-radius: 9px;   border-top-left-radius: 0;   border-bottom-left-radius: 0;   margin-left: 0px;   font-size: 1em;   box-shadow: none;   border: 1px solid rgba(0,0,0,0.1);   border-left: none; }   .field-wrapper {   position:relative;   margin-bottom:20px;   display: inline-block; }   label {   position:absolute;   bottom:-20px;   left:6px;   font-size:16px;   color:#aaa;   transition: all 0.1s linear;   opacity:0;   font-weight:bold;   display: block; }   label.on {   color: #4481C4; }   label.show {   bottom: -30px;   opacity: 1; }   body {   /* the following line fixes a blink in chrome https://code.google.com/p/chromium/issues/detail?id=108025 */   -webkit-backface-visibility: hidden; }