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; }