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

作者: Tokinx
时间: 2013-01-25
分类: 代码

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

标签: 网站, Css3

已有 36 条评论

蘑菇天空

2013-01-26 04:26

沙发。。。

回复
木头怀

2013-01-26 04:28

:razz: 不太喜欢右移，你的邮件居然进垃圾箱了~

回复
1. Tokin
  
  2013-01-26 15:07
  
  确实是诶，一会儿弄个SMTP
  
  回复
熊猫家族

2013-01-26 06:10

以后可以来这里学习CSS

回复
1. Tokin
  
  2013-01-26 15:07
  
  我也是业余的啦，也不懂前端
  
  回复
fttt

2013-01-26 06:13

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

回复
1. oyoy
  
  2013-01-26 07:08
  
  谁死了？
  
  回复
2. Tokin
  
  2013-01-26 15:08
  
  我了个去，考试了吧，成绩出来了没
  
  回复
oyoy

2013-01-26 07:09

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

回复
1. Tokin
  
  2013-01-26 15:05
  
  拜托，人家的那个用Js了，我这个可是纯Css
  
  回复
无名

2013-01-26 07:24

收藏备用，这个还是有点效果的 :lol:

回复
1. Tokin
  
  2013-01-26 15:06
  
  还有不少效果，有空再折腾试试
  
  回复
我的名字叫麒

2013-01-26 21:13

博主，你的demo失败，没看到效果！

回复
1. Tokin
  
  2013-01-26 21:24
  
  需要IE10以上才行，或者WebKit内核浏览器，总之，就是要支持css3的浏览器就对啦 :grin:
  
  回复
免费资源部落

2013-01-27 07:39

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

回复
1. Tokin
  
  2013-01-27 07:46
  
  如果没有IE，我想我们的网站会更漂亮，可是没有完美的，IE6还是无法彻底铲除
  
  回复
思想怪异的家伙

2013-01-27 11:56

博主，换个链接不？ :lol:

回复
常青

2013-01-28 01:01

这个貌似很火，好多网站都有这种效果！

回复
1. Tokin
  
  2013-01-28 01:02
  
  却是很不错的说
  
  回复
bbis

2013-01-28 06:21

这个效果可以，等回到家再弄吧。
明天要走了，特来要福利，再水一贴

回复
1. Tokin
  
  2013-01-29 00:02
  
  要去哪里啊，不在家看孩子，就知道疯，嘎嘎
  
  回复
天域剑客

2013-01-28 19:04

这个效果不错，今天下午泡泡新华书店，多学点东西 :mad: :mad: :mad:

回复
1. Tokin
  
  2013-01-29 00:01
  
  想学点什么啊，骚年？
  
  回复
天域剑客

2013-01-28 19:05

浅城，你的博客回复评论怎么这么快啊？用的Sendmail还是PostFix啊？

回复
1. Tokin
  
  2013-01-29 00:00
  
  别问我关于VPS的问题，自合租以来，我就没接触过它，我只知道我的FTP和数据库的帐号密码
  
  回复
  1. Ashe
    
    2013-01-29 03:42
    
    此言一点都不诧异 :evil:
    
    回复
    
    Tokin
    
    2013-01-29 03:50
    
    你看吧，我主题有邮件通知，唉！我好无辜，哈哈
    
    回复
peascloud

2013-01-29 20:16

用jQuery可以兼容

回复
1. Tokin
  
  2013-01-29 20:31
  
  感觉用CSS更简单些，而且这个效果可有可无
  
  回复
  1. Likecer
    
    2013-02-02 21:11
    
    CSS是方便点，直接放到主题的CSS文件当中就O了也加快了加载速度
    
    回复
    
    Tokin
    
    2013-02-03 00:22
    
    就是IE不支持，好可惜
    
    回复
时晞

2013-01-31 18:51

a:hover{margin-left:10px;}
改成 a{position:relative;}a:hover{left:10px;}
不然在一排链接中鼠标移上的链接与以后的链接都会往右移动。

回复
1. Tokin
  
  2013-02-01 00:23
  
  恩恩，不过我就是一排显示
  
  回复
Win8迷

2013-02-01 23:22

CSS3 不太懂 :eek:

回复
1. Tokin
  
  2013-02-02 00:03
  
  我也不懂，，，正在学习中
  
  回复
明月登楼

2017-03-08 17:40

Chrome下竟然没有动！ :???:

回复