其实实现 平滑左右移动的效果 蛮简单的,鼠标移动到文字连接时会出现向右平滑移动,效果很棒很不错的说,而且非常简单,加个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内核的低版本中是没有啥效果的,但是这个效果实现起来非常简单,加在网页上夜没什么损失,不仅仅要加在文字上,图片上。。。
Chrome下竟然没有动! 😕
CSS3 不太懂 😮
@Win8迷 我也不懂,,,正在学习中
a:hover{margin-left:10px;}
改成 a{position:relative;}a:hover{left:10px;}
不然在一排链接中鼠标移上的链接与以后的链接都会往右移动。
@时晞 恩恩,不过我就是一排显示
用jQuery可以兼容
@peascloud 感觉用CSS更简单些,而且这个效果可有可无
@Tokin CSS是方便点,直接放到主题的CSS文件当中就O了 也加快了加载速度
@Likecer 就是IE不支持,好可惜
浅城,你的博客回复评论怎么这么快啊?用的Sendmail还是PostFix啊?
@天域剑客 别问我关于VPS的问题,自合租以来,我就没接触过它,我只知道我的FTP和数据库的帐号密码
@Tokin 此言一点都不诧异 👿
@Ashe 你看吧,我主题有邮件通知,唉!我好无辜,哈哈
这个效果不错,今天下午泡泡新华书店,多学点东西 😡 😡 😡
@天域剑客 想学点什么啊,骚年?
这个效果可以,等回到家再弄吧。
明天要走了,特来要福利,再水一贴
@bbis 要去哪里啊,不在家看孩子,就知道疯,嘎嘎