js Typing effect example JS typing effect example, data-period settings from typing back to delete the word time, data-rotate can add and subtract Chinese and English words without jquery support
Code as follows: <h1>libraries give you <span class= "Txt-rotate fw700" data-period=500 "Data-rot" Ate= ' ["Knowledge", "community", "an outlet", "Chinese origin", "Oschina"] ' ></span></h1> code as follows: html,body { font-family: ' Open Sans ', ' Helvetica neue ', Sans-serif; padding:3em 2em; font-size:18p X Background: #fff; Color: #009966; } H1,H2 { font-weight:300 margin:0.4em 0;} h1 {font-size:3.5em;} h2 {font-size:2.5em; font-w eight: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-/ colo R: #222; } ::-moz-placeholder { /* Firefox 19+ * color: #222 } :-ms-input-placehol Der { 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;} Labe L { 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; }