Css3实现文字链接平滑左右移动的效果

其实实现 平滑左右移动的效果 蛮简单的，鼠标移动到文字连接时会出现向右平滑移动，效果很棒很不错的说，而且非常简单，加个css就OK啦！

实现效果：

• 鼠标放上来试试

当然，花点时间改一下效果会非常棒，下面就贴出代码吧：

html代码 ：

<div><a href="#1">Test 测试</a></div>

css代码：

.test a{background-color:#446CB3; color:#ffffff; padding:10px; text-decoration:none;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-khtml-transition: margin 0.2s ease-out; }
a:hover{margin-left:10px;}

当然，要知道css3动画不兼容ie10以下浏览器，所以这个效果在IE内核的低版本中是没有啥效果的，但是这个效果实现起来非常简单，加在网页上夜没什么损失，不仅仅要加在文字上，图片上。。。