<!DOCTYPE html>
<
html
lang
=
"zh-cmn-Hans"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>s_CSS参考手册_web前端开发参考手册系列</
title
>
<
meta
name
=
"author"
content
=
"Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com"
/>
<
style
>
h1{font-size:16px;}
.test{position:absolute;left:8px;width:200px;height:100px;margin:0 5px;padding:10px;border:1px solid #ddd;background-color:#eee;color:#000;
-moz-transition-property:left;
-moz-transition-duration:.5s;
-moz-transition-timing-function:ease-in;
-webkit-transition-property:left;
-webkit-transition-duration:.5s;
-webkit-transition-timing-function:ease-in;
-o-transition-property:left;
-o-transition-duration:.5s;
-o-transition-timing-function:ease-in;
transition-property:left;
transition-duration:.5s;
transition-timing-function:ease-in;
}
.test:hover{left:100px;}
</
style
>
</
head
>
<
body
>
<
h1
>请将鼠标移动到下面的矩形上:</
h1
>
<
div
class
=
"test"
>矩形在0.5s内慢慢向右移动<
br
/>transition-duration:.5s;</
div
>
</
body
>
</
html
>