css3之transition实现仿淘宝底部鼠标滑过动画效果

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-09-17 19:01:20　-　阅:　-　评:2　-　积分:0

相信读者对淘宝不陌生吧，其实淘宝上面有许多特效，有js特效，也有css3做的特效。例如进入淘宝【我要逛】页面后会发现页面底部有2个小图标，鼠标滑过时会发生变化。放张效果图：

值得注意的是，这个变化是很平和的，可不是一个普通的a:hover直接显示的哦。下面就由笔者用css3属性中的transition来完成这个效果。源码如下：

<!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>css3之transition实现仿淘宝底部鼠标滑过动画效果--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="transition,鼠标滑过动画,css3动画,css3特效,仿淘宝特效">
<meta name="description" content="transition,鼠标滑过动画,css3动画,css3特效,仿淘宝特效">
<style type="text/css">
*{margin:0; padding:0}
body{font-size:12px;}
.zdytjy{width:55px;overflow:hidden; position:absolute;bottom:100px; right:100px;}
.zdytjy a{display:block;height:55px;color:#fff;text-decoration:none;position:relative;left:0;top:0;
-webkit-transition: left .3s ease-out;transition: left .3s ease-out;}
.zdytjy a span{position:absolute;top:0px;left:55px;background:#999;text-align:center;display:block;
width:55px;height:45px;padding-top:10px}
.zdytjy .axian{border-bottom:1px solid #999;}
.zdytjy a:hover{left:-55px;}
</style>
</head>
<body>
<div class="zdytjy">
<a href="http://www.yilingsj.com/css3/2013-09-17/79.html" class="axian">
<img src="/d/file/css3/2013-09-17/tjy.jpg" />
<span>意见<br />反馈</span>
</a>
<a href="#top">
<img src="/d/file/css3/2013-09-17/top.jpg" />
<span>回到<br />顶部</span>
</a>
</div>
</body>
</html>

点此下载→→【代码】css3之transition实现仿淘宝底部鼠标滑过动画效果.zip　　　默认解压密码：www.yilingsj.com

我们来看下源码，没有用到任何js，纯css实现的，这就是神奇的css3。当然，ie6就免谈了。其实用jq也是能实现的，方法跟这个差不多，原理不变，都是在滑过时触发位移事件。这里事先设置好运动的方向left，然后设置滑过时向左运动一定距离即可。对于参数，读者可自行设置，上下左右四个方向任意变换就随读者的写法而改变了。

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2013-09-17/79.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！