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

/ 36评 / 4

其实实现 平滑左右移动的效果 蛮简单的,鼠标移动到文字连接时会出现向右平滑移动,效果很棒很不错的说,而且非常简单,加个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内核的低版本中是没有啥效果的,但是这个效果实现起来非常简单,加在网页上夜没什么损失,不仅仅要加在文字上,图片上。。。

  1. 常青说道:

    这个貌似很火,好多网站都有这种效果!

  2. 博主,换个链接不? 😆

  3. 之前用JS搞这种效果,现在用CSS3就达成了。可恶的IE

  4. 博主,你的demo失败,没看到效果!

  5. 无名说道:

    收藏备用,这个还是有点效果的 😆

  6. oyoy说道:

    鬼娃娃那个标题动得比较性感

  7. fttt说道:

    死者已逝,生者如斯。。。失踪好久

  8. 熊猫家族说道:

    以后可以来这里学习CSS

  9. 木头怀说道:

    😛 不太喜欢右移,你的 邮件居然进垃圾箱了~

  10. 蘑菇天空说道:

    沙发。。。

发表评论

邮箱地址不会被公开。 必填项已用*标注