-moz-transition:background 2s ease（平滑过渡，逐渐变慢动画）

需求：

 1、鼠标移到图片上方，图片平滑向上移动49像素，鼠标移开图片之后，图片平滑向下移动49像素；

动画效果：

页面展示效果为：

HTML结构为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition动画</title>
<style type="text/css">
html{color:#333;background:#f3f3f3;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}
caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom}input,textarea,select,strong{font-family:inherit;font-size:inherit;}input,textarea,select{*font-size:100%;}legend{color:#333;}.clear{height:0;font-size:0;line-height:0;clear:both; display:block;}body{font-size:12px;background-color:#f3f3f3;font-family:tahoma,verdana,arial,helvetica,sans-serif;text-align:center;color:#333; line-height:20px;}a{color:#816353;text-decoration:none;}a:hover{color:#c01313;}.clearfix{zoom:1;}.clearfix:after{content:'\0020';display:block;height:0;clear:both;}
.floor{ width:1190px; margin:0 auto; text-align:left;}
.floor-10{ overflow:hidden; padding-bottom:87px;}
.floor-10 a{ display:block; float:left; width:238px; height:240px;}
.floor-10 a .pic{ overflow:hidden; width:238px; height:240px; background-position:0 0;-moz-transition:background 2s ease;-webkit-transition:background 2s ease;-o-transition:background 2s ease;-ms-transition:background 2s ease;transition:background 2s ease;}
.floor-10 a:hover .pic{ background-position:0 -49px;}
</style>
</head>

<body>
<div class="floor floor-10">
     <a href="" target="_blank" title="">
        <div class="pic" style="background-image:url(http://images.cnblogs.com/cnblogs_com/chenguiya/643079/o_other_011.jpg)"></div>
     </a>
     <a href="" target="_blank" title="">
        <div class="pic" style="background-image:url(http://images.cnblogs.com/cnblogs_com/chenguiya/643079/o_other_022.jpg)"></div>
     </a>
     <a href="" target="_blank" title="">
        <div class="pic" style="background-image:url(http://images.cnblogs.com/cnblogs_com/chenguiya/643079/o_other_033.jpg)"></div>
     </a>
     <a href="" target="_blank" title="">
        <div class="pic" style="background-image:url(http://images.cnblogs.com/cnblogs_com/chenguiya/643079/o_other_044.jpg)"></div>
     </a>
     <a href="" target="_blank" title="">
        <div class="pic" style="background-image:url(http://images.cnblogs.com/cnblogs_com/chenguiya/643079/o_other_055.jpg)"></div>
     </a>
</div>
</body>
</html>

 

posted @ 2014-12-23 16:38  chenguiya  阅读(603)  评论(0)    收藏  举报