其实实现 平滑左右移动的效果 蛮简单的,鼠标移动到文字连接时会出现向右平滑移动,效果很棒很不错的说,而且非常简单,加个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内核的低版本中是没有啥效果的,但是这个效果实现起来非常简单,加在网页上夜没什么损失,不仅仅要加在文字上,图片上。。。
这个貌似很火,好多网站都有这种效果!
@常青 却是很不错的说
博主,换个链接不? 😆
之前用JS搞这种效果,现在用CSS3就达成了。可恶的IE
@免费资源部落 如果没有IE,我想我们的网站会更漂亮,可是没有完美的,IE6还是无法彻底铲除
博主,你的demo失败,没看到效果!
@我的名字叫麒 需要IE10以上才行,或者WebKit内核浏览器,总之,就是要支持css3的浏览器就对啦 😀
收藏备用,这个还是有点效果的 😆
@无名 还有不少效果,有空再折腾试试
鬼娃娃那个标题动得比较性感
@oyoy 拜托,人家的那个用Js了,我这个可是纯Css
死者已逝,生者如斯。。。失踪好久
@fttt 谁死了?
@fttt 我了个去,考试了吧,成绩出来了没
以后可以来这里学习CSS
@熊猫家族 我也是业余的啦,也不懂前端
😛 不太喜欢右移,你的 邮件居然进垃圾箱了~
@木头怀 确实是诶,一会儿弄个SMTP
沙发。。。