使用css3的动画属性来实现js的移动效果
先把类名和CSS属性写好。
使用transition全局属性来实现动画从左到右的移动宽度的时间。
使用transition-property属性来指定类名的宽度移动效果的时间。
使用transition-delay来实现它的延迟时间。
使用transition-timing-function来选择它的运动曲线。
当然还有最简单的综合写法
使用transition全局属性来实现以上的写法
.seser{ width:200px; height:200px; background:#F00; /*动画从左向右运动元素的宽度为三秒*/ transition:width 3s; /*指定要监控的属性是元素的宽度*/ transition-property:width 2s; /*延迟时间为0.1秒*/ transition-delay:0.1s; /*运动的曲线为：匀速*/ transition-timing-function:linear; /*综合写法*/ transition:all 3s 0.1 linear; }
下面这个是图片的移动效果。
使用全局transition全局属性来实现的
.serad{ margin-left:400px; margin-top:100px; width:500px; height:400px; position:absolute; } .serad img{ width:300px; height:300px; border:2px solid #F00; position:absolute; left:0; top:0; transition:left 2s; } .serad img:hover{ left:-20px; }