<span style=
"color: #0000ff;"
><!</span><span style=
"color: #ff00ff;"
>DOCTYPE html</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>html </span><span style=
"color: #ff0000;"
>lang</span><span style=
"color: #0000ff;"
>=
"en"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>head</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>meta </span><span style=
"color: #ff0000;"
>charset</span><span style=
"color: #0000ff;"
>=
"UTF-8"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>title</span><span style=
"color: #0000ff;"
>></span>animation<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>title</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>link </span><span style=
"color: #ff0000;"
>rel</span><span style=
"color: #0000ff;"
>=
"stylesheet"
</span><span style=
"color: #ff0000;"
> href</span><span style=
"color: #0000ff;"
>=
"./animate.css"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>style</span><span style=
"color: #0000ff;"
>></span><span style=
"background-color: #f5f5f5; color: #800000;"
>
div</span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
width</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 100px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
height</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 100px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
margin</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 100px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
margin-bottom</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 50px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
background</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> #0ff0f0</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"background-color: #f5f5f5; color: #000000;"
>}</span><span style=
"background-color: #f5f5f5; color: #800000;"
>
input[type=
"text"
]</span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
outline</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> none</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
width</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 188px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
height</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 48px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
border</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 2px solid #888</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
border-radius</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>10px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
text-align</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> center</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
font-weight</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> bold</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
font-size</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 16px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
margin-left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>55px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"background-color: #f5f5f5; color: #000000;"
>}</span><span style=
"background-color: #f5f5f5; color: #800000;"
>
input[type=
"button"
]</span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
width</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 120px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
height</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 40px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
font-family</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
"黑体"
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
text-align</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> center</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
font-weight</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> bold</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
outline</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> none</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
border</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 2px solid #00FFFF</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
background</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> #fff</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
color</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> #00FFFF</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
font-size</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 14px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
cursor</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> pointer</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
border-radius</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 5px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span><span style=
"background-color: #f5f5f5; color: #ff0000;"
>
margin-left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>50px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>style</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>head</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>body</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>div</span><span style=
"color: #0000ff;"
>></</span><span style=
"color: #800000;"
>div</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>input </span><span style=
"color: #ff0000;"
>type</span><span style=
"color: #0000ff;"
>=
"text"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>input </span><span style=
"color: #ff0000;"
>type</span><span style=
"color: #0000ff;"
>=
"button"
</span><span style=
"color: #ff0000;"
> value</span><span style=
"color: #0000ff;"
>=
"Animate it"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>script</span><span style=
"color: #0000ff;"
>></span>
<span style=
"background-color: #f5f5f5; color: #0000ff;"
>
var
</span><span style=
"background-color: #f5f5f5; color: #000000;"
> oBtn</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>document.getElementsByTagName(</span><span style=
"background-color: #f5f5f5; color: #000000;"
>
"</span><span style="
background-color: #f5f5f5; color: #000000;
">input</span><span style="
background-color: #f5f5f5; color: #000000;
">"
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>)[</span><span style=
"background-color: #f5f5f5; color: #000000;"
>1</span><span style=
"background-color: #f5f5f5; color: #000000;"
>];
</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
var
</span><span style=
"background-color: #f5f5f5; color: #000000;"
> oDiv</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>document.getElementsByTagName(</span><span style=
"background-color: #f5f5f5; color: #000000;"
>
"</span><span style="
background-color: #f5f5f5; color: #000000;
">div</span><span style="
background-color: #f5f5f5; color: #000000;
">"
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>)[</span><span style=
"background-color: #f5f5f5; color: #000000;"
>0</span><span style=
"background-color: #f5f5f5; color: #000000;"
>];
</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
var
</span><span style=
"background-color: #f5f5f5; color: #000000;"
> oText</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>document.getElementsByTagName(</span><span style=
"background-color: #f5f5f5; color: #000000;"
>
"</span><span style="
background-color: #f5f5f5; color: #000000;
">input</span><span style="
background-color: #f5f5f5; color: #000000;
">"
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>)[</span><span style=
"background-color: #f5f5f5; color: #000000;"
>0</span><span style=
"background-color: #f5f5f5; color: #000000;"
>];
oBtn.onclick</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>(){
oDiv.className</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>
"</span><span style="
background-color: #f5f5f5; color: #000000;
">animated rollOut</span><span style="
background-color: #f5f5f5; color: #000000;
">"
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;
</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
var
</span><span style=
"background-color: #f5f5f5; color: #000000;"
> arr</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>oDiv.className.split(</span><span style=
"background-color: #f5f5f5; color: #000000;"
>
"</span> <span style="
background-color: #f5f5f5; color: #000000;
">"
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>);
oText.value</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>arr[</span><span style=
"background-color: #f5f5f5; color: #000000;"
>1</span><span style=
"background-color: #f5f5f5; color: #000000;"
>];
setTimeout(</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>(){oDiv.className</span><span style=
"background-color: #f5f5f5; color: #000000;"
>=</span><span style=
"background-color: #f5f5f5; color: #000000;"
>
""
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>},</span><span style=
"background-color: #f5f5f5; color: #000000;"
>1000</span><span style=
"background-color: #f5f5f5; color: #000000;"
>);
}
</span><span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>script</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>body</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>html</span><span style=
"color: #0000ff;"
>></span>