jquery_javascript スキルを使用しない js タイピング効果の共有例

コードをコピー コードは次のとおりです:

ライブラリは次のとおりです。 ;

コードをコピー コードは次のとおりです。

html,body {
font-ファミリ: ' Open Sans'、'Helvetica Neue'、サンセリフ;
パディング: 3em 2em;
font-size: 18px;
背景: #fff;
カラー: #009966;
}

h1,h2 {
フォントの太さ: 300;
マージン: 0.4em 0;
}
h1 { フォントサイズ: 3.5em }
h2 { フォントサイズ; : 2.5em; フォントの太さ: 700; }
h3 {
カラー: #505050;
フォントのサイズ: 1.5em;
}
.fw700 🎜> font-weight: 700;
}
input {
font-size: 100%;
背景: #fff;
境界線: なし;
カラー: #000;
パディング: 12px;
マージン: 0 -0.25em 0 0.3em;
border-top-left-radius: 9px;
border-bottom-left-radius: 9px;
ボックス-shadow: 0 0 5px rgba(0,0,0,0.5) inset;
}
#call {
border-top-right-radius: none;
border-radius: none;
}
::-webkit-input-placeholder {
カラー: #222;
}

:-moz-placeholder { /* Firefox 18- */

カラー:
}

::-moz-placeholder { /* Firefox 19 */

カラー:
}

:-ms-input-placeholder {

カラー: #222;
}

.inline {

表示: inline;
}

.button {

表示: インラインブロック;
背景: #009966;
カラー: #fff;
フォントの太さ: 700;
テキスト装飾: なし;
パディング: 0.44em 0.89em 0.39em;
マージン: 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;
ボーダー: 1px ソリッド rgba(0,0,0,0.1);
ボーダー左: なし;
}

.field-wrapper {

位置:相対;
マージン-ボトム:20px;
表示: インラインブロック;
}

label {

Position:absolute;
bottom:-20px;
left:6px;
font-size:16px;
color:#aaa;
トランジション: all 0.1 秒 リニア;
不透明度:0;
font-weight:bold;
表示: ブロック;
}

label.on {

カラー: #4481C4;
}

label.show {

底部: -30px;
不透明度: 1;
}

body {

/* 次の行は Chrome の点滅を修正します https://code.google.com/p/chromium/issues/detail?id=108025 */
-webkit-backface-visibility : 非表示;
}